落ち着いたトーンの中に、テクノロジーらしい機能性とエレガンスを両立したデザインを目指しました。
可読性の高いサンセリフ(ゴシック体)をベースに、コントラスト比を意識した配色設計と、情報量を適切に制御することで、内容そのものに集中できる体験を設計しています。
本サイトは、面接用途と副業用途の両方で機能することを前提に設計しています。
構成は以下の通りです:
メインビジュアル
サービス紹介(フリーランス案件向け)
プロジェクト / 制作物
自己紹介
ブログ
お問い合わせ
掲載案件の多くが非公開のため、一般的なサムネイルによる視覚訴求が難しい課題がありました。
その解決策として、自身のイラストレーションやロゴ制作を活用し、オリジナルのビジュアルで世界観を構築しています。
挿絵
プロフィールのイラストレーション
他のイラストレーションに合わせてフラットにしました。
イニシャルのm.iを繋げ、円の辺り線を引いてデフォルメしました。
人と物を繋ぐ、人と人を繋ぐ、人を目的に繋げ
形を円で表現。良いご円(ご縁)があるようにという思いを込めてです。
あたり線
TOP
案件詳細ページ
見やすさを優先してシンプルなデザインにしました。
プロフィールページ
スキルと軽い経歴のご紹介を設けました。
どういう人物か端的に知っていただくため情報は必要最低限にしています。
ブログ詳細ページ
人物像の補足で設けました。
コード
TOPのHTMLとCSSのコードです。BEM設計を参考にしています。
サイトのみ
デザイン:1ヶ月
コーディング:2週間
アニメーション:3日