U235 Portfolio

URL

https://u2-35.com/

概要

働きながら「WEBCOACH」でWebデザインやコーディングを学んでいる私自身のポートフォリオサイトです。

将来的には在宅での仕事を目指し、クライアントに向けた自己紹介と実績の発信、仕事の依頼につなげることを目的としています。

デザイン・コーディングは完全オリジナルで制作しました。

ターゲット

Webデザインやコーディングの依頼を検討している企業様や個人事業主様。副業やフリーランスでの活動を想定したクライアント様が主な対象です。

他にも、同業者様やパートナーとして協業する可能性があるWeb制作会社様やエージェント様も対象としています。

目的

自己紹介として、自分のスキルや経歴をわかりやすく伝える。

実績紹介として、過去の制作物を掲示し、スキルや成果を具体的にアピールする。

お問い合わせフォームを設置し、サイトを通じてクライアント様から仕事の依頼や相談を受けられる仕組みを確立する。

情報設計

トップページ: スナップスクロールで1画面ごとに切り替わる、5つのセクションの構成となっています。; 各セクションで異なるベースカラー（青・赤・緑・紫・黄）を採用し、スナップスクロールでの切り替え時にわかりやすさを重視しています。カラフルで楽しいデザインでありながら、落ち着いた色調を採用することで親しみやすい雰囲気を演出しています。; また、黒猫のキャラクターにアニメーションを取り入れ、閲覧者様に楽しさと記憶に残る印象を与えることを意識しました。
メインビジュアル: シンプルなデザインにしていますが、U235のポートフォリオサイトであることと、キャッチコピーよりWEBデザインとコーディングをメインに行っていることを伝える意図があります。
Aboutセクション: 自己紹介として、プロフィール、スキル、経歴、メッセージを4つのタブで分けて表示させています。
Worksセクション: 制作物をカテゴリ別（Webサイト、グラフィック、その他）に分けて表示させています。制作物をクリックすると、制作物の詳細ページへ移動するようになっています。
Blogセクション: 私のアウトプットブログを紹介しています。ブログはWordPressで作成しており、PHPで最新記事3つを表示させるようにしています。; アウトプットをすることで自身の知識の定着を促進し、同じような初学者の方への参考になればと思っています。
Contactセクション: お問い合わせフォームはGoogleフォームをサイト内に組み込んでおり、内容を確認・管理しやすくなっています。; メイン構成外ですが、フォーム送信後のサンクスページも作成しております。
作品詳細ページ: 制作物ごとに、以下の要素を掲載しています。; モックアップ：作品を一目で把握できるビジュアルです。; 詳細情報：タイトルやURL、概要、ターゲット、目的、情報設計、制作期間、使用ツール・言語などを載せています。どのような手順で、どんな特徴をどのように表現したのかといった、制作の意図をお伝えすることで、より制作物の魅力を知ってもらえると思います。; 他にも、WEBサイトであれば完成デザインや、ロゴやバナーなどの付随した制作物を追加で掲載しています。