したかったこと
・可読性の高いサンセリフ/ゴシック体を使いたい
・コントラスト比の高い配色
・内容をメインにするため控えめな色使いにしたい
・適切な量の提供
落ち着いていて、テックだけどエレガントなデザインを目指しました。
大まかな構成
・メインビジュアル
・サービスの紹介（フリー案件向け）
・プロジェクト、制作物も紹介
・自己紹介
・ブログ
・お問い合わせ
面接用と副業用の兼用ができるサイトにしました。
このサイトには写真がブログ記事にのみあります。
案件のほとんどが社外非公開だったため、サムネイルをビジュアルにして映やすことが難しいです。そこでイラスト制作が私にはできたので、ロゴやイラストレーションでサイトのビジュアルを作ることにしました。
挿絵
Serviceの部分のイラストレーションは線画で入れて見たところ、絵が弱かったためフラットな表現にしています。
機器の中にあるUIや女性のイラストレーションの制作もしました。（スマートフォン内の画像のみ素材を使用）
一番最後の線画は下描きです。
プロフィールのイラストレーション
他のイラストレーションに合わせてフラットにしました。少し日本画風にしています。
ロゴデザイン作成
こちらで詳細が見られます。
TOP
案件詳細ページ
見やすさを優先してシンプルなデザインにしました。
プロフィールページ
スキルと軽い経歴のご紹介を設けました。
どういう人物か端的に知っていただくため情報は必要最低限にしています。
ブログ詳細ページ
人物像の補足で設けました。
コード
TOPのHTMLとCSSのコードです。
ノーコードを利用するか悩みましたが、以前勤めていたWeb制作会社の案件が載せられないため、ポートフォリオ サイトをワークに加えることにしました。!doctypeからコードを書いてみました。
命名規則は自分のサイトのため正確には決めていませんが、BEMを参考にしています。
サイトのみ
デザイン:1ヶ月
コーディング:2週間
アニメーション:3日
