Facebook 琥珀の森乗馬倶楽部 - ポートフォリオ用架空サイト
Logo

琥珀の森乗馬倶楽部 - ポートフォリオ用架空サイト

クレジット
Avatar
コーダー
琥珀の森乗馬倶楽部 - ポートフォリオ用架空サイト-1
シェア
制作ノート
ポートフォリオ化メモ

しょーごさんの中級課題で合格をいただいた後、オリジナルポートフォリオ化の作業に着手しました。

1. テーマ選定

私がもともと学生時代に馬術部にいた経験から、乗馬クラブのサイトを練習として作ってみたいと思っていたので、今回のレイアウトが使えそうだと思いました。
色々な乗馬クラブのサイトを実際に見ながら、章立てや内容を考えました。

2. カラー選定

配色を自分で考えるのはなかなか難しいので、今回は写真をベースに色を抽出しました。

まずキービジュアルとしたい画像を探し、その画像に含まれる色を抽出して、メインカラーとベースカラーを決めていきました。

元々の中級課題では、ベースカラーはベージュっぽい色、文字色は茶色っぽい色でしたが、今回キービジュアルにする写真の下の部分がベージュっぽかったので、写真とサイトの色にコントラストをつけたく、ファーストビューは濃い緑色にしました。

文字色は読みやすいようベージュっぽい色にし、セクションごとに色を入れ替えました。

アクセントカラーは黄色系ですが、課題で使っていた色とは変えています。

3. 名称、キャッチコピー、文章などの選定

ここが一番苦手なところだったので、今回は初めてChatGPTを使ってみました。乗馬クラブの名前やキャッチコピー、紹介文、レッスン内容まで全部考えてもらいました。

4. ロゴ作成

ロゴはPhotoShopで作成。フリー画像のアイコンと、乗馬クラブの名前を組み合わせて作りました。

乗馬クラブっぽいロゴを作るため、最初は馬をシンボル化したアイコン画像を使ってみると、とてもそれらしくできました。ただ、ちょっとクラシックすぎて敷居が高そうに見えてしまったので、最終的に蹄鉄のイラストを使ってもう少しカジュアルな感じにしました。

5. 画像選定

フリー素材からテーマに合うものを探して使用しました。

今回は写真とイラスト両方を探したので、色々なサイトにお世話になりました。

6. 利用ツール

・Figma(オリジナル化のデザインに使用。元の課題もFigmaで作成されたデザインをもとに作成しました。)

・Photoshop(画像の加工に使用しました。)

・Visual Studio Code

7. レビュー

しょーごさんの課題では、オリジナル化したあとも一度レビューしていただけます。今回はほぼ問題なしとの評価をいただけました。また、しょーごさんのオリジナルポートフォリオ化事例のページに掲載していただけました。

https://shogo-log.com/sample-original-portfolio/

シェア