ZeroPlus Media > ITリテラシー > 実務の前の仮想案件をやってみよう

実務の前の仮想案件をやってみよう

ITリテラシー

2023/11/02

2024/04/08

Web制作の学習をしているけれど、本当のところ実務ではどうやるのだろうか？、どのくらい時間がかかるものだろうか？、などと不安に思うことはありませんか？

そのような場合、実務の前に仮想案件をやることをおすすめします。仮想案件は実務の練習になるので、実務をやる前に経験しておくといいでしょう。

この記事では「実務の前の仮想案件の流れ」を解説していきます。合わせて、仮想案件をやるメリットについても解説していきます。

この記事はこんな人に向けて書きました

仮想案件をやるメリットが知りたい人
仮想案件をやる流れをざっくり知りたい人

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

仮想案件の前提
仮想案件の流れ
仮想案件のメリット
まとめ：実務の前に仮想案件をやるのがおすすめ

仮想案件の前提

仮想案件では、実務形式に近い形で仮想の案件を設定し、自分で決めた締切日（納品日）までに終わらせることを想定します。

仮のクライアントを設定し、要件定義からデザイン作成、コーディング、サーバーアップの納品までの一連の流れを実務形式で行います。

かずき先生

仮想案件を設定するうえでは、完璧を求めすぎないように注意しましょう。完璧を求めるあまり、工程ごとの作業で詰まっては本末転倒です。

仮想案件は、基本的に以下の目的を達成するために行うことを忘れないようにしましょう。

実務の流れを掴む
実績がない場合は、仮の制作実績を作る
自分のスキル感、制作スピード感を認識する
自分ができないこと、足りない知識を把握する

仮想案件の流れ

仮想案件の大まかな流れは以下のようになります。

要件定義
ワイヤーフレーム、デザインカンプ作成
デザインカンプから静的コーディング
コーディングした静的ファイルをWordPress化
（WordPressサイトまで想定する場合）
テストサーバーにアップロードして表示確認

自分で納期（締切日）を設定し、その日までに一連の流れを終わらせます。

かずき先生

理想は一人で全て行うことですが、例えば自分のスキルがコーディングメイン、もしくはデザインメインだったりと、スキルに穴があると仮想案件が進められない場合があります。

その場合、コミュニティやWeb制作の勉強仲間に声をかけてみる、SNSで募集をかけてみるなどして、チームを組んでみることをおすすめします。

それぞれのスキルの穴をお互いに補い合えるのがチームを組む大きなメリットです。チームを組むことで自分の仕事への責任感も生まれます。

要件定義

要件定義とは、例えば以下のことを決めます。

どんな目的でデザインを作成するか
想定しているターゲット層
サイトの雰囲気
ページ構成

Webサイトの場合は集客率アップ、LPの場合はお問い合わせ数の増加などを目的とすることが多く、成果を出すために最適なデザインを作ることが求められます。

さらに、要件定義ではサイト全体で必要なページ数や実装する機能などの仕様についても決めておきます。

かずき先生

ここで仕様を決めておかないと、制作の進行中に手戻りが発生する原因となります。全体の進行をスムーズに行うためにも、最初に要件定義をしておくことが大切です。

デザイン作成の練習としてデザインカンプを作成するときでも、要件定義は必ず行うようにしましょう。

ペルソナの設定

仮想案件では、まずクライアントのペルソナを設定しましょう。

ペルソナとはターゲットとなる架空の顧客やユーザーを描写したもので、そのサイト制作を依頼する架空のクライアントです。ペルソナを設定することによって、デザインの方向性やデザインの設計をより細かく決定できます。

ペルソナでは、例として以下のような項目を設定します。

年齢、性別、職業、趣味や関心：年齢や性別、職業、趣味などを設定
ニーズや課題：ペルソナはどんな悩みや課題を抱えているか
背景やストーリー：設定したペルソナの簡単な背景ストーリーを設定

ペルソナは自分で考えるのもよいですが、AIに考えてもらうのもおすすめです。
以下はChatGPTを使った例です。

AIにペルソナを考えてもらう

以上の情報をもとに、要件定義を行うと、次のようになります。

要件定義の例

目的	カフェの魅力を伝え、集客する
ターゲット層	近所に住む40代女性
サイトの雰囲気	アーティスティックなイメージ
ページ構成	TOPページ、ABOUT、NEWS、MENU、RESERVE
機能	SNS埋め込み　予約フォーム設置

実際のサイト制作ではより詳細な要件定義が必要とされます。特に「ターゲット層」の部分では、ここまでペルソナを考えたのと同様に、具体的な名前や年齢などのペルソナを決めて制作を行う場合もあります。

しかし、ここではあまり考えすぎることなく次のステップに進みましょう。サイト制作にあたって必要な項目が何かを、制作の過程で知っていくことが仮想案件を行う目的です。

ワイヤーフレーム、デザインカンプ作成

デザインの要件が決まったら、参考にするデザインを決めます。

要件定義ですり合わせた情報から、参考サイトを使って設定したクライアント（ペルソナ）のニーズに近いデザインをいくつかピックアップします。それをもとに、大まかな完成形をイメージしましょう。

かずき先生

参考サイトは、レイアウトや配色など、クライアント（ペルソナ）のイメージに合うものを選定することが大切です。

参考にするデザインの数は、できるだけ多めに用意するのがおすすめです。少なくとも5つほどは用意しておきましょう。

参考サイトを決めたらワイヤーフレームを作成します。

ワイヤーフレームとはデザインの構成案のことで、線や図形、テキストなどを配置して作成します。

ワイヤーフレームを作成したら、それをもとにデザインカンプを仕上げていきます。

ここで行う作業は、以下の通りです。

パーツを作成・配置する
画像を挿入する
配色をする
あしらいを追加する
誤字脱字のチェックをする

パーツの配置は、全体的なバランスを考えながら行っていきます。ボタンやテキストなどのパーツを作成し、あしらいを追加していきましょう。

デザインカンプから静的コーディング

デザインカンプからコーディングするときには、以下の作業を行います。

デザインカンプデータを確認し、共通パーツなどの洗い出し、画像の書き出しなど
コーディングファイルの環境構築
共通パーツのコーディング
各ページのコーディング
JavaScriptの処理

デザインカンプデータを確認

デザインカンプは主にFigma、AdobeXD、PhotoShop、Illustratorなどの形式で作られることが多いです。

仮想案件では自分で作ったデザインカンプがあるはずなので詰まることはないと思いますが、実務では様々な形式のデザインカンプが登場します。どの形式のデザインカンプであっても、将来的にはコーディングできるようになるといいでしょう。（この段階ではできなくてもだいじょうぶです）

共通パーツなどの洗い出し、画像の書き出しなど

デザインカンプをトップページ、下層ページも含めて全体的に上から下まで確認し、共通パーツを洗い出します。また、デザインカンプから必要な画像を書き出していきます。書き出す画像は2倍書き出しで書き出します。

画像は用途や画像によって書き出し形式が変わってきます。それぞれのメリットとデメリット、用途を表にまとめました。

	メリット	デメリット	主な用途
SVG	ベクターベースであり、拡大・縮小しても品質が落ちない。透過に対応。 CSSやJavaScriptで容易に操作・アニメーションが可能。	複雑なイメージや写真には不向き。サポートしていないブラウザや環境も存在する。	ロゴアイコンイラストや図 Webサイトでのアニメーション要素
PNG	圧縮が可逆で、画像品質が維持される。透過に対応。シンプルなイメージやテキストの表示が綺麗。	JPGに比べてファイルサイズが大きい。	ロゴアイコン WebサイトのUI要素（ボタン、バナーなど）
JPG	圧縮率が高く、ファイルサイズが小さい。カラーのグラデーションが豊か。写真や複雑なイメージに適している。	圧縮の過程で画像品質が劣化する（非可逆圧縮）。透過に対応していない。	写真高解像度のイメージ Webサイトの一般的な画像

画像ごとの書き出し形式の例

コーディングファイルの環境構築

デザインカンプから使われている色やフォントを読み取り、コーディングファイルに記述していきます。書き出し圧縮した画像も忘れずにファイルに格納します。ここでは作業を行うためのコーディングファイルの準備をしていきます。

フォントの設定

フォントはGoogleフォント、Adobeフォント、フリーフォントなど種類があります。また有料フォント、無料フォントなどの違いもあります。

例えば、GoogleフォントならCDN、Adobeフォントなら埋め込みコード、などフォントによって読み込み方に違いがあるので注意しましょう。

CDNとは「Content Delivery Network（コンテンツデリバリーネットワーク）」の略称で、外部ファイルをリンク1つで使用することができる仕組みのことです。

フォントをダウンロードして使用する場合、@font-faceプロパティを使うのが便利です。

【CSS】@font-faceでfont-familyを指定する方法

色の設定出

CSSにカラーコードを記述します。
色はCSSのカスタムプロパティで管理することができます。Sassを使用する場合は色を変数で管理できます。

CSSでカスタムプロパティで管理する場合

:root {
  --color-white: #fff;　/* 変数にカラーコードをセット */
}

p {
  color: var(--color-white);　/* プロパティに変数を使用する場合 */
}

Sassで変数管理する場合

$white: #fff; /* 変数にカラーコードをセット */

p {
  color: $white; /* プロパティに変数を使用する場合 */
}

色を変数管理すると、カラーコードで覚えなくていいので効率的にコーディングできます。

CSSのカスタムプロパティに関しては下記の記事を一読ください。

実務の前の仮想案件をやってみよう

JavaScriptやjQueryのライブラリ
また、JavaScriptやjQueryのライブラリなどを使用する場合は、ライブラリの読み込みなども準備しておきましょう。

例えば、デザインカンプを見てスライドショーの実装が必要になりそうな場合には、slickやSwiperを使用して実装するか、それとも自作するか判断します。

slickやSwiper、GSAPなどの使い方は以下の記事をお読みください。

【jQuery】slickの使い方とカスタマイズ・オプションの解説

【JavaScript】Swiperの使い方とオプション・カスタマイズ方法について解説

実務の前の仮想案件をやってみよう

共通パーツのコーディング例えば、洗い出した以下のような共通パーツをコーディングしていきます。

セクションタイトル、見出し
ボタン
ヘッダー、フッター
パンくずリスト
下層FV
お知らせ一覧やブログ一覧で使われる記事リンクやブログカード
トップに戻るボタン...など

各ページのコーディング

共通パーツのコーディングを終えたら、作成した共通パーツを組み合わせて各ページのコーディングをしていきます。コーポレートサイトのようなページ数が多いデザインをコーディングする場合、どのページからコーディングするかは人によって異なります。

どのページからコーディングする場合でも、レスポンシブでどの画面幅から見てもスタイル崩れがないようにコーディングしましょう。

JavaScriptの処理

JavaScriptが必要になる箇所は例えば、以下のようなものがあります。

ハンバーガーメニュー / メガメニュー
タブ
トップに戻るボタン
アコーディオンメニュー
スライドショー
モーダルウィンドウ
アニメーション...など

これらの機能は、Webサイトを構築するうえで出てくる頻出パーツです。これらをコーディングできるようになっていきましょう。

静的ファイルをWordPress化（WordPressサイトまで想定する場合）

WordPressサイトを想定する場合は、コーディングした静的なファイルをWP化していきます。

WordPress化は、管理画面から記事を投稿した際に、例えばお知らせセクションに反映されるようループ処理したり、実際にお問い合わせメールが届くようにしたり、コンテンツを動的に変更したりできるようにします。

静的サイトと違ってWPサイトは動的に変更できるのが特徴です。例えば記事タイトルや本文、アイキャッチ画像などを管理画面から変更できるように、WordPressのテンプレートタグやPHPの関数などを使って処理します。正しく処理ができれば、管理画面から変更すると、変更した部分が画面に反映されるようになります。

静的コーディングから納品までの流れは以下の記事で詳しく解説しています。