構成からWebサイトデザインをしよう

久しぶりにnote書きました。こばやす(@kobayas_s)です。
Webデザイン勉強中の方からよく「ポートフォリオに載せるほど実績が詰めていないです」「実務経験がそもそも無いのでポートフォリオが作れません」という悩みを聞きます。
ポートフォリオは所謂デザイナーの商品サンプル。初学者の最難関ハードルとして、まず案件獲得するために必要なサンプルが無いと売り込み活動すらできませんよね。
そこで、バナーお題のようにWebデザインのお題も作ってみたら、そんな方達のお役に立つかな…と思い作ってみました。
バナーお題を知らないという方は下記をご覧ください。

未経験だと現場の構成指示書を見た事が無く、どうWebサイト設計したら良いかも分からないと思いますので、構成を読み解きWebデザインに落とし込むヒントも掲載しました。

構成指示書概要

野菜スープ専門店Koba Soupのコーポレートサイト（公式サイト）制作
・TOP
・下層ページ2P（こだわり、メニュー）
※データはPDFです。文字による構成書で、デザインの完成見本は付いておりません。
※就学前の駆け出しWebデザイナー専用に分かり辛い専門用語については注釈や参考サイトを入れています。

なお、vol.1のお題（初級編）は下記の記事に同梱しています。
まだWebデザインカンプを作ったことが無い人は参考にしてみてください。

今回のnoteは上記のお題をクリアした次のステップとして考えてください。

 こんな人におすすめ
・Webデザインカンプの作り方基礎を覚えた人
・ポートフォリオに載せるものが無く、デザインの力量を見せるためのダミーサイトを作りたい人
・現場で作ってる構成の雰囲気を知りたい人
・Webサイト制作での情報整理の仕方を知りたい人

出来たデザインは「 #Webデザインお題 」というハッシュタグを付けてtwitterで投稿すると、同じお題をやっている人と繋がる事が出来るので是非やってみてください。

注意事項
このお題の著作権はこばやす（@kobayas_s）にあります。不特定多数に見られる所へお題構成書の内容全文を公開しないようにしてください。
ご自分で制作されたデザインに関しては公開OK・ポートフォリオ掲載OKです。
ポートフォリオに載せる場合は以下の条件を守ってください。
❶配布元URL（または著者twitterリンク）を掲載する事
❷コンセプト・希望デザイン以外のnote内容は情報公開NG

デザイン添削依頼をする時の情報提供について
作ったデザインを添削して貰いたい…という方もいると思います。
コンセプトや何のためのWebサイト制作なのかが分からないと添削する方が困ると想定されるので、以下条件の元であれば添削者限定で情報提供してもOKとします。
❶不特定多数が見られる状態での情報公開しない事（twitterやブログでの構成内容公開はNG。添削者へはメールかDMで内容をお送りください）
❷添削する人にも内容を非公開にして頂く事を伝える
❷配布元のURLを添付する事

また、作ったサイトをコーディングしてネットに公開する時は、ダミーサイトだという事を分かるようにしてください。
検索に上がってきてしまうと、本当に存在するサイトだと勘違いしてしまう人もいます。

【勘違いされないために出来る事】
・個別のドメインを取得して公開しない（自分のポートフォリオサイトのドメイン内で完結させる）
・noindexを入れて検索に上がらないようにする（具体的な表記方法）
・タイトルタグに「架空サイト」と入れる
・ファーストビューに架空である事を明記する
・お問い合わせフォームを付ける場合は送信させない（ダミーサイトの注意表記を入れる）
・住所、電話番号は使える番号に書き換えない
・Googleマップはダミー画像にする

オススメレビューサービス

プロのデザイナーさんによる添削サービスで、ダントツ一番お勧めしたいのがプラスレビューです。
ベテランデザイナーの アロードさん（@arowd_info）が優しく丁寧にデザインレビューをしてくれるので、更に学びが深くなること間違いなし！
デザインの仕方に迷ったら是非利用してみて下さい。

プラスレビュー｜PLUS REVIEW

Webデザインスクールを無料で受けられるプロジェクトの紹介もしています。
これからWeb制作の学習をする方は是非検討してみて下さい！