WORKS

概要

自身の制作物や経歴をまとめたポートフォリオサイトを制作しました。

テーマ

ライティングの演出を取り入れ、印象に残るデザインに。

目標

訪問者が直感的に「自分の作品やスキルが分かるデザイン」だと感じられるようにする。

情報設計

制作物で自分のスキルレベルを示した上で、どんな人物なのか理解してもらいやすい構成にしています。

ビジュアルデザイン

ライティングの効果を踏まえ、見せたい部分が目立つようなデザインにしました。モノトーンを基調にしつつ、アクセントとしてピンクを取り入れることで、印象にメリハリをつけてて、視認性を高めました。 下に落ちていくピンクの丸は、スクロールに楽しさを加えるための演出として取り入れました。

担当内容

企画・デザイン・コーディング

制作期間

1.5ヶ月（デザイン2週間/コーディング2週間/ブラッシュアップ1週間）

使用ツール

使用言語

1.Webデザイナーのポートフォリオリサーチ

制作過程を載せてくださってるNoteを読んだり、参考にしたいサイトをピックアップしました。

2.構成を組む

リサーチして大事だと思ったことは、見てくださる人が簡潔に見れることと、 自分のリアルな情報を伝えることだと思いました。 なので制作物→自己紹介でスキルレベルがリアルに伝わるように構成にし、 制作物の説明では、制作プロセスを入れて自分がどのようにWebサイトを作ったのか伝えられるようにしました。

3.デザインのコンセプト決め

間接照明が好きでライティングを使ってアピールしたいと考えました。 映画のチラシやポスターのデザインを参考にしました。

4.ファーストデザイン

「O」の中から光が差し込むイメージでデザインしました。 ただし、光の広がり方の調整が難しく、 コンテンツの構成に影響を与えてしまうため、別の表現方法を検討することにしました。

5.セカンドデザイン

スポットライトを使って表現し、光の広がり方を自由に調整できるようにしました。トレーナの方にキャッチアップをいただき、ブラッシュアップを行いました。

改善案

・ヘッダーとフッターでライトアップの表現伝わるのでコンテンツは別のデザインにしたほうが良い。

・視認性を上げるためにアクセントに違う色を入れた方が良い。

改善策

・ライトの光を斜めにして再現

・ピンクをアクセントにして視認性を意識

6.UI/UX設計

丸をトップからフッターまで落として、思わずスクロールしたくなるWebサイトを目指しました。 ライティングされた世界観を伝えるために、影の入れ方をこだわったり、アニメーションを計算して入れたりしました。 静的と動的なところを分けて動きが伝わるように考えました。 コーディングでの表現の仕方をWebサイトで調べて、 参考サイトのリンクをNotionにまとめて資料にしています。

7.ロゴ

Iを斜めにしてライトの光をイメージしました。iの上の丸をピンクにして、このサイトの特徴的なピンクの丸を反映させてシンボル的存在にしました。

8.コーディング

cssが設定しやすいように親要素、小要素を使うように意識しました。 topは100vhでスクリーン全体を使い世界観が伝わるようにしました。 ライトと背景の斜めはclip-pathで設計しcssでアニメーションが加えれるようにしました。

9.ブラッシュアップ

ChatGPT、デジハリのトレーナーの方にサイトを見ていただいたり、違和感の感じる部分をブラッシュアップをしました。 具体的には、全体の余白、テキスト、デザインの統一性。そして文章の修正。スマホでレスポンシブ確認をしました。 時間が経つと、以前は考えなかった問題点が見えてくるので、日々学びながら目を養い、より良いデザインを作れるようになりたいです。