デジLIG中間課題のすすめかた①　WF編～あるデジLIG生の場合～

こんにちは！　ゆうき(@yu_kilog)です。

未経験からWebデザイナーを目指して勉強中のアラサーです。

現在私は「デジタルハリウッド　by LIG（以下：デジLIG）」というスクールをメインにWebデザインについて学んでいます。（2021.3~）

今回はデジLIGの中間課題を進めていくなかで、自分が気を付けていたこと、学習したことについてまとめていきたいと思います。

未経験からWebデザインを勉強している方、これから中間課題に取り掛かる予定だけど、なにからはじめていいかわからない！　というデジLIG生や他のひとはどんな風に課題を進めているんだろう？　と気になるデジLIG生に、少しでも参考にしてもらえたらうれしいです。

デジLIGの中間課題って？

中間課題の内容

デジLIGでは中間課題として架空サイトの制作を行います。

個人の学習状況や身に着けたいスキルにより中間課題の内容は異なりますが、わたしはWebデザイナーへの就職を目標としているため、「オーガニック食材のサイトのデザインとコーディング」を選択しました。

内容をもう少し詳しくいうと、「無農薬野菜宅配サービス（スグ食べ）のお試しセット注文を目的としたLPのデザインとコーディング」です。あらかじめ用意されているヒアリングシートに沿って制作を進めていくという課題です。

中間課題の流れ

中間課題は、下記のような流れで行います。

それぞれの段階ごとにトレーナーのチェックを受け、フィードバッグをもらいながら進めます。

スケジュール作成

わたしがスケジュール作成で意識したのは、この中間課題が自分のポートフォリオに掲載される作品になるということです。

未経験からWebデザイナーへ就職するためにはポートフォリオの質が大きく影響すると考えられます。

ポートフォリオについて検索すると、ポートフォリオの作り方に関する記事がたくさん出てくると思います。そういった記事の中で、載せたほうがいい項目として「制作期間」が挙げられていることが多いんですよね……。

そう考えたので、わたしの場合は納得がいかないからと時間をかけて進めるのではなく、きっちりとスケジュールを決めて進めることを目標としました。

わたしが実際に作成したスケジュールがこちらです。

スケジュールを作成したら、トレーナーさんのチェックを受けます。

トレーナーチェックの結果、デザインとコーディングそれぞれに＋２日することでスケジュールを最終決定しましたが、自分の中では当初のスケジュール通りに２週間で終わらせることを裏目標にしていました。

WF作成

ヒアリングシートをもとにアイデア出し

WF作成にいきなり入るのではなく、まずはヒアリングシートを読み込みました。

ヒアリングシートの詳細な内容は割愛しますが、クライアントの意向やこのWebサイトの目的が何であるかを確認し、これをもとにアイデアを出していきます。

どんな人がどういう経緯でこのサイトにたどり着くのか？どんなコンテンツがあればアクションを起こすのか？アクションを起こしやすくする工夫は？などなど浮かんだアイデアをとりあえず書き出して、考えをまとめていきます。

実際のメモ↓

アイデアを文章化することで、のちのち見返しやすくなるのでおすすめです。

参考サイトをひたすら見る

また、アイデア出しをおこなう時点で下記のようなサイトも参考として見ていました。

色使いや、ボタンがどこに位置しているか、画像をどんなふうに配置しているか、ジャンプ率はどうなっているか……

自分のアイデアを実現するには何が必要か、とにかく見まくることでサイトのデザインがぼんやりですが見えてきます。

サイトの構成を決める

アイデアをまとめ、他サイトも参考にしながらサイトを構成するコンテンツとその順番を決定します。

ヘッダーを固定表示させて注文ボタンを設置することにより、常に注文ボタンが目に入りコンバージョンをアップさせるねらいです。

ファーストビューは余白と写真を大きく使い、新鮮な野菜や憧れの「丁寧な暮らし」のシーンを想起させるようなデザインに。

次に、コンセプトとこだわりを見せてどういうサービスなのかお客様に理解を促します（他社との差別化）。

お客様の声は購入へのダメ押しとして最後に配置されることが多いですが、今回はSNSへの投稿を意識してもらうために比較的序盤に配置しました。また、インスタを意識した正方形の写真、タグを使用するデザインに。

その後、お試し商品の詳細で購入意欲の高いお客様はすぐに購入できるようにボタンを設置。

ページが長くなってしまい、離脱率が上がってしまうことが懸念されるため、後半の情報についてはQ＆Aからページ内リンクを作成してスクロールせずとも知りたい情報にたどり着けるように工夫しました。

最後にもう一度お試しセットの詳細を配置して注文をダメ押しする、という構成です。

簡単レシピや公式のinstagramを載せるなどコンテンツの追加も検討しましたが、クライアントの負荷が増えてしまうことが懸念されるので今回は既存のコンテンツのみでサイトを構成することにしました。

XDでWF作成

上記の構成を踏まえ、WFを作成していきます。

今回わたしはXDを使ってWF（とデザインカンプ）を作成しましたが、Web制作に特化したソフトということもありとても使いやすかったです！

ただし、初めてXDを使う！　という方は先にAdobe公式チャンネルの動画を見て学習してからWF作成を始めることを強くおすすめします。

最初に作成したWFがこちら。

トレーナーさんからのフィードバックは、

• 全体的に余白をもっととる
• 「選ばれる理由」のところは横書き、縦のラインをそろえる
• Q＆Aのところはアイコン入れる

などでした。指摘いただいた部分を修正して、再度チェックをもらい、OKが出ればWFが完成！

実際にここまでかかった時間は作成３日、FB・修正に１日でした。（予定では作成２日、FB・修正に２日）

WF作成の次は、デザインカンプをつくっていきますが、長くなってきたのでデザインカンプ編はまた別の記事として投稿しようと思います！

読んでくださってありがとうございました！

つづきはこちら↓