制作過程

1. 01.コンセプト（モチーフ）決め

   ・モチーフ

   私自身が好みとするものである「犬」と「お米」をモチーフとして選択しました。

   ・目的の明確化

   「デザイナー」としての就職活動用のポートフォリオ。また、採用担当者様をターゲットとしました。

2. 02.構成

   ポートフォリオを見てくださる方に「自分は何が出来るのか」と一目で分かりやすくする為、topページでは上から順に、
   挨拶、出来ること、作品紹介、最後にお問い合わせのセクションで構成しました。
   それぞれの作品を紹介するページでは、完成作品、基本の情報、制作過程、まとめ、主にこの4つのセクションで構成し、
   作品と制作過程を具体的に見せるよう工夫しました。

3. 03.デザインのトンマナ設定

   ポートフォリオでは柔らかい印象を抱いて欲しい為、配色は全体的に自然の象徴の色である緑をメインカラーに。
   ベースカラーは稲の色のベージュを選定しました。そしてアクセントカラーはベージュからトーンを上げた黄色で
   ボタンなどに採用しました。フォントでは手書き風のスクリプト体で柔らかさを表現。
   和文のフォントでは洗礼され、シンプルな印象を持つ「Noto Sans」で統一しました。

   Color

   

   Font

   Noto Sans JP

   

   Rounded Mplus 1c

   

4. 04.レイアウト

   topページの「service」のセクションでは、一目見て出来ることがわかるようにカード型に配置。
   「work」セクションでは強弱をつけたり、動きをつけたりしてデザインが単調にならないように意識しました。
   「about」セクションでは視線誘導を意識し、画像→文章の順に見せるように配置しました。
   シンプルなデザインの中で流れを生み出し、分かりやすく、飽きないレイアウトを心がけました。

5. 05.コーディング

   最初のpc画面のコーディングをする時からレスポンシブ化のことを考え、
   後にレスポンシブ対応しやすいようなコードを意識しました。
   レスポンシブ対応では「pc画面」「タブレット画面」「スマートフォン画面」
   どのデバイスで見ても表示が崩れることのないように対応させました。
   そして、UI、UXを考慮し、画面遷移できるところはホバーアクションを実装。
   仕上げにサイトに動き（アニメーション）を付けることで世界観を表現し、UXが向上するように工夫しました。