TOP
サムネイル

ポートフォリオサイト

  1. Concept

    落ち着いたトーンの中に、テクノロジーらしい機能性とエレガンスを両立したデザインを目指しました。
    可読性の高いサンセリフ(ゴシック体)をベースに、コントラスト比を意識した配色設計と、情報量を適切に制御することで、内容そのものに集中できる体験を設計しています。

    Top

    本サイトは、面接用途と副業用途の両方で機能することを前提に設計しています。

    構成は以下の通りです:

    メインビジュアル
    サービス紹介(フリーランス案件向け)
    プロジェクト / 制作物
    自己紹介
    ブログ
    お問い合わせ

    掲載案件の多くが非公開のため、一般的なサムネイルによる視覚訴求が難しい課題がありました。
    その解決策として、自身のイラストレーションやロゴ制作を活用し、オリジナルのビジュアルで世界観を構築しています。

    Illustration

    挿絵

    Webサイトのイラスト Webサイトのイラスト Webサイトのイラスト

    プロフィールのイラストレーション

    プロフィールのイラスト

    他のイラストレーションに合わせてフラットにしました。

    Logo

    イニシャルのm.iを繋げ、円の辺り線を引いてデフォルメしました。
    人と物を繋ぐ、人と人を繋ぐ、人を目的に繋げ
    形を円で表現。良いご円(ご縁)があるようにという思いを込めてです。

  2. ロゴ





    あたり線

    ロゴのライン ロゴのライン

    TOP

    トップページの画像
  • 案件詳細ページ

    詳細ページの画像

    見やすさを優先してシンプルなデザインにしました。

  • プロフィールページ

    プロフィールページの画像

    スキルと軽い経歴のご紹介を設けました。
    どういう人物か端的に知っていただくため情報は必要最低限にしています。

  • ブログ詳細ページ

    ブログ詳細ページの画像

    人物像の補足で設けました。

  • コード

    コード

    TOPのHTMLとCSSのコードです。BEM設計を参考にしています。

  • Color

  • Summary