制作物

【初心者&時間のない人必見!】ポートフォリオを2日で作る手順~#30DAYSトライアルDAY18~DAY20

こんにちは。mito(@mito_works)です。

コーディングのスキルアップのために挑戦している#30DAYSトライアルの記録、4つ目の投稿です。

【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】DAY11,DAY12『Bootstrapの基礎』こんにちは。mito(@mito_works)です。 今回はコーディングのスキルアップのために挑戦している#30DAYSトライアル...
【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】DAY13,DAY.14『Bootstrapを使ってビジネスLP制作』こんにちは。mito(@mito_works)です。 今回はコーディングのスキルアップのために挑戦している#30DAYSトライアル...
【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】DAY15,DAY16『Bootstrapを使ってビジネスLP制作②』こんにちは。mito(@mito_works)です。 今回はコーディングのスキルアップのために挑戦している#30DAYSトライアル...

 

今回はポートフォリオの作成。

 

#30DAYSトライアルのコンテンツを作成した、@showheyohtaki さんからこんな嬉しいリツイートを頂き、コーディング以外のポートフォリオのコンセプトの作り方やデザインの考え方の手順をまとめたくなりましたw。

mito
mito
私自身、作ろう作ろうと思ってはいたけれど、時間がかかりそうでなかなか着手できなかったので、進め方はすごく工夫しました!

コーディング初心者のみならず、時間がなくてポートフォリオの作成になかなか取り組めていない方、サクッと作りたい方にオススメな記事です。

momo
momo
完璧は目指さない。まずは公開することを目標に。公開してからブラッシュアップしていくことを前提に作ったよ!

DAY18~20.『ポートフォリオサイトを作る』

こちらのDAY18~20を2日でやりました。

 DAY18~20. ポートフォリオサイトを作る

DAY18.『HTMLテンプレートを使ってみよう+自分のポートフォリオサイトを作ろう①』
DAY19.『自分のポートフォリオサイトを作ろう②』
DAY20.『ポートフォリオを公開しよう』

ポートフォリオ作成の意図を明確にする

そもそも何のために作るのか?
まずはじめに、迷った時に立ち戻れる場所を作るために3つのことを明確にしました。

目的自分がどういう人で、どういうデザインが得意か一目でわかるように、人となりや世界観を表現する
コンセプト名刺よりも詳しい自己紹介
達成したいゴール共感してくれる人、いいね!と思ってくれる人と楽しく仕事をするための1つのツールになる
mito
mito
この状態だと、まだふんわりしているのでさらに掘り下げていきます。

掲載の情報を洗い出し、掲載順序を決める

何を載せるか?を考える時に、誰に向けて作るものなのか?(ターゲット)を具体的に考えました。

どんな人が見るのか想像する

駆け出しのWebデザイナー。今の段階で、ポートフォリオを公開したからといっていきなり全く知らない人から連絡がきてお仕事につながるというのは考えずらいです。

知り合いに「Webデザインの仕事始めたんだよ、もし必要だったら声かけてね〜。ちなみにこんなの作ってるよ」と直接URLを共有するか、知り合いが私を紹介する時に見せる参考URLのイメージ。
なので、あくまで知り合いの範囲。

私のことを少し知ってはいるけれど、詳しくは知らない。
何かしら仕事があって、この人(私)に依頼できるかどうか判断したいという時に使われるのではと想像しました。

掲載情報に優先順位をつける

自分が仕事を依頼する場合の思考回路を参考に、「依頼できるかどうかの判断」を分解し、以下4つに分けました。

  • デザインのトーンが合うか→実績
  • 依頼したい内容を仕事としているか→サービス紹介
  • 依頼したい内容の価格はどれくらいか→料金表
  • 信頼できそうか→プロフィール
mito
mito
上から順に重要なものを並べているのでこの順番に載せています。

掲載情報の文章を考える

デザインの前に文章をあらかじめ考えておきました。
文章を考え、編集する作業は案外時間がかかります。

mito
mito
掲載するものしないもの、どこまで詳しく書くのか?を明確にして進めました。

1.スキルセット
変動の幅が大きいのであえて載せていません。今はできることを増やしている段階です。案件をこなしつつ知識を増やしているので、やったことがないことも挑戦したいという思いもあり、載せていません。

2.お問い合わせ
ここからお問い合わせが来ることはまだないと思い、お問い合わせフォームの実装には時間をかけず、ブログのお問い合わせフォームへ遷移するようにしています。ゆくゆく実装したいです。

3.詳細なプロフィール
全く見ず知らずの人から連絡が来ることはないという想定で、詳細なプロフィールは載せていません。

4.気軽に相談してほしいということをアピールしている
経験が浅いので、料金表に収まるようなパッケージ化ができていません。
なので、サービス内容に載っていないことでも柔軟に対応しますということを敢えて書いています。

デザインを考える

次はデザインを考えます。

コンセプトとなるキーワードを洗い出す

掲載情報の洗い出しで考えたターゲット(どんな人が見るのか?)から考えると、男女や年齢、職業など外側ではなく、内側の部分が大事だと思いキーワードを洗い出しました。

スマート(コンセプトづくりやブランディングをしっかりする)
だけでなく、遊び心があり、素敵だな、いいなと思うときめきや楽しさがある。

と考えました。

キーワードを色や文字や画像に変換する

色は楽しさやユニークさを感じさせる黄色。
それだけでなく、モヤモヤがパッとひらける、光が射すというイメージ。

スマートさを表現するにあたり、男女どちらかに寄らないように意識して、赤寄りのピンク。

この2色は意識的に使い、残りは遊び心とときめきをプラスする色を選びました。

自分の中でスマートさ、遊び心、ときめきのバランスがちょうどよくなるように、画像やアニメーションも選んでいます。

テンプレートを探す

なぜ2日で実装できるのか?
そうです、テンプレートを使っているからです。

今回はこちらを使いました。

Void – Onepage Parallax Personal Portfolio Templates

mito
mito
今回初めて使ったのですが、楽をするというよりは、他人の書いた綺麗なソースを読むことで勉強になったり、実装の引き出しが増えます。

テンプレートを使ったから、瞬殺で完成するかと思いきや、コードの全体を理解する必要があるので、自分の思い通りに修正するのは難しかったです。

オススメのツール紹介

実績を見せる部分はこちらのモックアップイメージがオススメです。

mockup

参考にしたい色を画像から抽出するときはこのツールがオススメです。

iromiru

実装する&公開

こちらに沿って進めました。

  1. HTMLテンプレートを使ってみよう+自分のポートフォリオサイトを作ろう①
  2. 自分のポートフォリオサイトを作ろう②
  3. ポートフォリオを公開しよう

 

今後の課題〜修正したいところ〜

公開したものの、修正したい箇所は色々あります。

  • 初回読み込みに時間がかかるのでサクッと読み込めるようにしたい
  • モーダル表示画面の閉じるボタンがないのでつけたい
  • 実績(特にWebデザイン)について外部リンクに飛ばしたり、目的や作業範囲の説明文を追加したい
  • スマホにもアニメーションをつけたい
  • PCとスマホで背景色が違うので統一したい
  • 料金表のマージンをもう少し広げたい
  • メニューの順序の不具合修正(ServicesとPrice)
mito
mito
順次修正していきます!

まとめ

デザインはゼロから作るのではなく既存のものの組み合わせと言います。

コーディングも同じく、全てゼロから作ろうと気負わなくていいのだということが一番大きな学びでした。

ABOUT ME
mito
こんにちは!mitoです。 フロントエンド開発、デザイン全般をやっているクリエイターです。 学ぶことと教えることが好きです。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、2020年4月からフリーランスになりました。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。