こんにちは。mito（@mito_works）です。
コーディングのスキルアップのために挑戦している#30DAYSトライアルの記録、4つ目の投稿です。
今回はポートフォリオの作成。
mitoさんのポートフォリオ完成度高ェ…‼️
アニーさん（@Annielovescode ）の時もそうだったけど、デザイナーさんがコーディング覚えると威力ハンパないですねw「ポートフォリオサイトを作れるようになる」がゴールでもいいから、そこまでやると世界変わると思うなー。#30DAYSトライアル https://t.co/C5PG5YbFBI
— ショーヘー@Webエンジニア (@showheyohtaki) September 3, 2019
#30DAYSトライアルのコンテンツを作成した、@showheyohtaki さんからこんな嬉しいリツイートを頂き、コーディング以外のポートフォリオのコンセプトの作り方やデザインの考え方の手順をまとめたくなりましたw。
コーディング初心者のみならず、時間がなくてポートフォリオの作成になかなか取り組めていない方、サクッと作りたい方にオススメな記事です。
Contents
DAY18~20.『ポートフォリオサイトを作る』
こちらのDAY18~20を2日でやりました。
DAY18.『HTMLテンプレートを使ってみよう＋自分のポートフォリオサイトを作ろう①』
DAY19.『自分のポートフォリオサイトを作ろう②』
DAY20.『ポートフォリオを公開しよう』
ポートフォリオ作成の意図を明確にする
そもそも何のために作るのか？
まずはじめに、迷った時に立ち戻れる場所を作るために3つのことを明確にしました。
| 目的 | 自分がどういう人で、どういうデザインが得意か一目でわかるように、人となりや世界観を表現する |
|---|---|
| コンセプト | 名刺よりも詳しい自己紹介 |
| 達成したいゴール | 共感してくれる人、いいね！と思ってくれる人と楽しく仕事をするための1つのツールになる |
掲載の情報を洗い出し、掲載順序を決める
何を載せるか？を考える時に、誰に向けて作るものなのか？(ターゲット)を具体的に考えました。
どんな人が見るのか想像する
駆け出しのWebデザイナー。今の段階で、ポートフォリオを公開したからといっていきなり全く知らない人から連絡がきてお仕事につながるというのは考えずらいです。
知り合いに「Webデザインの仕事始めたんだよ、もし必要だったら声かけてね〜。ちなみにこんなの作ってるよ」と直接URLを共有するか、知り合いが私を紹介する時に見せる参考URLのイメージ。
なので、あくまで知り合いの範囲。
私のことを少し知ってはいるけれど、詳しくは知らない。
何かしら仕事があって、この人（私）に依頼できるかどうか判断したいという時に使われるのではと想像しました。
掲載情報に優先順位をつける
自分が仕事を依頼する場合の思考回路を参考に、「依頼できるかどうかの判断」を分解し、以下4つに分けました。
- デザインのトーンが合うか→実績
- 依頼したい内容を仕事としているか→サービス紹介
- 依頼したい内容の価格はどれくらいか→料金表
- 信頼できそうか→プロフィール
掲載情報の文章を考える
デザインの前に文章をあらかじめ考えておきました。
文章を考え、編集する作業は案外時間がかかります。
1.スキルセット
変動の幅が大きいのであえて載せていません。今はできることを増やしている段階です。案件をこなしつつ知識を増やしているので、やったことがないことも挑戦したいという思いもあり、載せていません。
2.お問い合わせ
ここからお問い合わせが来ることはまだないと思い、お問い合わせフォームの実装には時間をかけず、ブログのお問い合わせフォームへ遷移するようにしています。ゆくゆく実装したいです。
3.詳細なプロフィール
全く見ず知らずの人から連絡が来ることはないという想定で、詳細なプロフィールは載せていません。
4.気軽に相談してほしいということをアピールしている
経験が浅いので、料金表に収まるようなパッケージ化ができていません。
なので、サービス内容に載っていないことでも柔軟に対応しますということを敢えて書いています。
デザインを考える
次はデザインを考えます。
コンセプトとなるキーワードを洗い出す
掲載情報の洗い出しで考えたターゲット（どんな人が見るのか？）から考えると、男女や年齢、職業など外側ではなく、内側の部分が大事だと思いキーワードを洗い出しました。
スマート（コンセプトづくりやブランディングをしっかりする）
だけでなく、遊び心があり、素敵だな、いいなと思うときめきや楽しさがある。
と考えました。
キーワードを色や文字や画像に変換する
色は楽しさやユニークさを感じさせる黄色。
それだけでなく、モヤモヤがパッとひらける、光が射すというイメージ。
スマートさを表現するにあたり、男女どちらかに寄らないように意識して、赤寄りのピンク。
この2色は意識的に使い、残りは遊び心とときめきをプラスする色を選びました。
自分の中でスマートさ、遊び心、ときめきのバランスがちょうどよくなるように、画像やアニメーションも選んでいます。
テンプレートを探す
なぜ2日で実装できるのか？
そうです、テンプレートを使っているからです。
今回はこちらを使いました。
Void – Onepage Parallax Personal Portfolio Templates
テンプレートを使ったから、瞬殺で完成するかと思いきや、コードの全体を理解する必要があるので、自分の思い通りに修正するのは難しかったです。
オススメのツール紹介
実績を見せる部分はこちらのモックアップイメージがオススメです。
参考にしたい色を画像から抽出するときはこのツールがオススメです。
実装する&公開
こちらに沿って進めました。
今後の課題〜修正したいところ〜
公開したものの、修正したい箇所は色々あります。
- 初回読み込みに時間がかかるのでサクッと読み込めるようにしたい
- モーダル表示画面の閉じるボタンがないのでつけたい
- 実績（特にWebデザイン）について外部リンクに飛ばしたり、目的や作業範囲の説明文を追加したい
- スマホにもアニメーションをつけたい
- PCとスマホで背景色が違うので統一したい
- 料金表のマージンをもう少し広げたい
- メニューの順序の不具合修正（ServicesとPrice）
まとめ
デザインはゼロから作るのではなく既存のものの組み合わせと言います。
コーディングも同じく、全てゼロから作ろうと気負わなくていいのだということが一番大きな学びでした。
