Springfalfal

今回は、ポートフォリオサイトのデザインカンプの制作過程を記録として残します。

使用ツールはFigma Affinity Gemini の３つになります。

• ・サイトの目的を決める
• ・サイトの基本構成
• ・サイトのテイストを決める
• ・サイトに使用する基本スタイル
• ・トップページ
• ・アーカイブページ
• ・カテゴリ別アーカイブページ
• ・個別ページ
• ・反省点
• ・まとめ

サイトの目的を決める

一番最初に行ったのはサイトの目的を決めることです。

ポートフォリオサイトなので、

「採用者様に見ていただく」

「自分らしさ」

この２つに加えて

「サイト全体を通して、スキルをアピールする。」

これらのテーマをもとにサイトの制作を始めました。

サイトの基本構成

サイトの基本構成は次のようになります。

トップページ　（制作実績・自己紹介・スキル・学習記録）

　学習記録用アーカイブページ

　学習記録用カテゴリページ

　学習記録用個別ページ

制作実績・自己紹介・スキルは採用者様に見ていただく項目。

学習記録は主に、自分が後から復習できるように

WordPressを用いて自作したことをアピールするため

これに加えて、

採用者様・Web制作を学んでいる人に少しでも目を通していただけたらよりモチベーションが上がる

当サイトの３つのテーマを表したものになります。

サイトのテイストを決める

テイストは、「自分らしさ」を詰め込んだものになります。

最初に自分の好きな雰囲気を表すワードをいくつかまとめ、

その中から次のものをテーマにテイストを決めていきます。

和風・自然・落ち着き

これらを元にGeminiに大まかなサイトテイスト案をいくつも作成します。

その中から、自分の最も気に入ったテイストが次のものです。

落ち着きのある色合い、自然、和風

これらが全て詰め込まれています。

このテイストを元にデザインカンプを作成していきます。

サイトに使用する基本スタイル

ここからは、Figmaを使用します。

まず最初に行うのがフォントの選定と基本配色です。

英数字は柔らかいAmaranth、日本語は和風のSawarabi-Mincho

背景カラーは落ち着きのある薄い茶色、メインカラーになります。

アクセントカラーとして薄水色（主に下線などに使用）

目立たせたいところは思い切って鮮やかな赤色を選びました。

メインカラーとSawarabi-Minchoは特に気に入っているスタイルです。

トップページ

サイトの表示速度のためにアニメーションの使用は最低限に

ポートフォリオサイトなので、基本的には採用者様に見ていただくためのものになります。

採用者様の時間を取らせないように、

サイトはスッと表示されるようにJavaScriptの使用は控えめにしました。

ヘッダー、フッターをシンプルに

ヘッダーとフッターは最低限の役割を持たせたシンプルなものになります、

ヘッダーには

サイトタイトルと各セクション、学習記録アーカイブページへのリンク

モバイル用ハンバーガーメニュー

フッターには

サイトタイトル、SNSリンク、コピーライト

配色は黒と白のみで邪魔にならない程度に作成しました。

ファーストビュー、MVを決める

サイトの顔になるファーストビューには

メインタイトルを画面中心、

両端に桜の木

メインタイトルを飾るための桜の花びらを散らせました。

この部分は後々のレスポンシブデザインでとても苦労します。

メインタイトルはテキストを主体に周りに雲と月をイメージしたロゴをFigmaで書き出しました。

桜の木と花びらはフリー画像をもとに

欲しい部分だけを切り抜いて透過画像に変換（形式はWebp）

使用ツールはAffinityになります。

制作実績セクション

制作実績セクションはslick.jsを用いて

スライド式に実績画像が流れるシンプルなものになっています。

ここは後々、制作実績が増えるにつれて

制作を通して得たものを記載するようなデザインに変更することを予定しています。

自己紹介セクション

自己紹介セクションではカード形式で

上部に簡単な経歴

下部に簡単な学習履歴

をまとめたシンプルなものです。

プロフィール画像はCanvaを用いて自分の写真を和風テイストでイラストにしたものです。

スキルセクション

スキルセクションは

各言語・ツールをバッジ風にしたロゴとして、それぞれできることを簡単にまとめました。

学習記録セクション

このセクションはアーカイブの記事３つを表示するようにデザインしました。

アーカイブページを用意していますが、トップページには簡潔にまとめてあります。

もっと見るボタンを落款風にし、

このボタンを押すとアーカイブページに飛ぶデザインです。

アーカイブページ

アーカイブページはコンテンツヘッダーとして

タイトルと水墨画風の富士山

扇子を用いた現代風のロゴとカテゴリ名を各リンクに設定しています。

メイン部分は

各記事のサムネイル画像とタイトル、カテゴリロゴを用いてカード形式のリストになります。

アクセスのしやすさと回遊率を上げる

さらに、カテゴリセクションを置いて

各カテゴリリンクを配置、

リスト下部に

ページネーションを配置

これらは記事の探しやすさと回遊率を上げるために設置したものです。

カテゴリ別アーカイブページ

このページはアーカイブページの使い回しがメインになります。

異なる点はコンテンツヘッダーのロゴを

水墨画風富士山ロゴ→各カテゴリロゴ

に変更し、

ファーストビューでどのカテゴリの記事が表示されているかわかるようにしました。

そのため、リストのカードからはカテゴリロゴを排除しました。

個別ページ

個別ページでは

文章を紙に書いてそれを貼り付けたようなデザインにしました。

タイトルと日付を上部に、両サイドにカテゴリロゴを配置して

トップページやアーカイブページからアクセスした人にも

この記事のカテゴリが一目でわかるようにしてあります。

その下に、大きくサムネイル画像を表示して記事の内容を明確にします。

その後、投稿本文が入り、

記事の最後にトップページと同じもっと見るボタンを配置し、

アーカイブページへ誘導しています。

ページ下部には同カテゴリの前後記事を配置して、

特定のカテゴリに興味がある人には該当するカテゴリの記事に

さらにアクセスしていただけるデザインです。

中央のカテゴリロゴは前後記事が同カテゴリであることを示しています。

反省点

これらのデザインカンプを元にコーディングしていくのですが、

メインビジュアル部分の

桜の花びら部分をメインタイトル用に余白をつけているのですが、

レスポンシブの際、

横幅だけでなく縦幅を掛け合わせたレスポンシブコードを大量に書くことになります。

この部分は桜の花びらとメインタイトルを１枚の画像として書き出して

横幅に合わせて表示する画像の大きさを変更する

といった形にしておくべきでした。

余白設定がデザインカンプ通りにいかない

あとは、マージンやパディングをFigma内で綺麗に見えるように設定しましたが、

実際のサイト表示にすると大きく変更することが多かった点です。

この部分は実際のサイト制作でどれくらいの余白が必要になるかの経験を蓄えていくのが早いと考えています。

まとめ

デザインカンプ制作からサイト制作まで全て一人で行ったのですが、

デザインカンプは単にデザインを整えるだけでなく、

その後コーディングする人のための知識も必要になるということが身に染みてわかりました。

次回以降のデザインではコーディングの際に手を止めさせないデザインを作りたいと思います。

あとは、単純なデザイン力がまだまだなので、

コンペなどに応募する形でデザイン力をつけていきます。