![見出し画像](https://assets.st-note.com/production/uploads/images/35397422/rectangle_large_type_2_2df70bd975b0f231a844a2198a13c7df.png?width=800)
ポートフォリオを1から作ってみた話
こんにちは!しいのき(@ShinokiDesign)です。
Webデザイナーの転職活動をするにあたって、
ポートフォリオをハンドコーディングで一から作りました!🙌🏻✨😭
Webのスクールに2回通ってるにもかかわらず、
1度も卒業制作を作り切れなかった私が生れてはじめてサイトを作り上げられたことに感動しております…😭
作った時に参考にしたことや思ったことを
備忘のために残しておきたいと思いnoteを書きますのでお付き合い頂けますと幸いです☺️
0-1 なぜポートフォリオサイトを作ろうと思ったのか
私は現在ECサイトの運用をしていまして、
デザイナーに転職するにあたってコーディネーターさんに紙のポートフォリオを送った際にこんなやり取りがありました。
昨日派遣のコーディネーターさんに「ポートフォリオにもっとこういう事を書いた方がいいとかアドバイスありますか?」と聞いてみたら、
— しいのき🐶Webデザインと動画編集 (@ShinokiDesign) August 27, 2020
①LPを作ることが多いのでバナー模写だけじゃなくてLP模写があるといい
②実際のクライアントワークの実績があるとよりいい
③webデザインを見たいので→続く
→
— しいのき🐶Webデザインと動画編集 (@ShinokiDesign) August 27, 2020
ポートフォリオもweb上にあるとよりいい
というアドバイスをいただきました。
ポートフォリオにバナー模写をもっといれようと思っていたのですが、LP模写に変更、ポートフォリオサイトを作る(レスポンシブにすること)、それらをしながらLPコンペに応募しよう(p`・ω・´q)🔥
Twitterでは省略していますが、実際は
「Web上にポートフォリオがあるとよりいいですね。
Webデザイナーの募集はWebのデザインを見たいので。」
と教えてもらいました。
5年ほど前にWebデザインのスクールに通っていたのですが、1から自分でサイトを作ったことはなく、、
人生で一度くらいはデザインからコーディングまで全て自分で作ったサイトをアップしたい!と思っていたので、いっちょ作ってみるか!と腹をくくりました(;´∀`)
0-2 参考にしたポートフォリオサイト
未経験からWebデザイナーになった方のポートフォリオを沢山見ていたのですが、
その中で「こ、これは!!」と思ったサイトがありました(*'ω'*)
それがよっしーさんのポートフォリオサイトです!
1度見たら忘れない、唯一無二のデザインでありながら、
ご本人の人間性が凄くよく伝わってきて、
なおかつ「作ること」を楽しんでるのも伝わってきて、
「この人にデザインをお任せしたい!」と思える素敵なサイトでした。
シンプルなサイトにすれば、デザインの幅が広がって転職も決まりやすいかも?と思ったのですが、
よっしーさんのように、Web上にあるのに人間味が伝わってくるサイトがいいなと思い、構成や見せ方などもかなりお手本にさせていただきました!m(__)m
1 全体のイメージを決める
よっしーさんの場合、ご本人が好きな「宇宙」がテーマだったので、私の好きなもの、、「アメコミ風」にするか、「懐ゲー風ドット絵」「アウトドア風」・・?
といろいろ考えたのですが、
どれも私の要素ではあるものの「人間性」をあらわすものではないなとあれこれ思いめぐらせていました🤔
それでもなかなか決まらなかったので、
心を無にして、頭にぱっと浮かんだものにしよう!
と決めて無心になってみたら、
「南国の海の中に沈んでいく」イメージと「レモネード」が浮かんできて😳
「これだ!!」と思い、全体のイメージを
「海のような南国のブルーハワイレモネード🍋」に決めました☺️
めっちゃ夏っぽいサイトになったのに、作り終えたころには秋になってましたけどね…。はは。
新しいポートフォリオのイメージを考えてました😊🏖🐠🍹
— しいのき🐶Webデザインと動画編集 (@ShinokiDesign) June 26, 2020
ワイヤーじゃなくて頭の中のイメージを起こす感じ🧐
頭の中にブルーハワイレモネード🍹的なものが浮かんできて、好きな物、海、ブルー、レモネードの中に飛び込んだみたいな…とか考えてました。
JSで背景に炭酸の泡がつねに出てる感じとか… pic.twitter.com/X0fCG7Ly2E
2 土台づくり
今の仕事がサイトのコード修正が主なこともあって、
本を見ながらコーディングの練習をしていました。
Webクリエイターズボックスのmanaさんの著書
「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」で自分でサイトを1つ作ろうとしていました。
✍manaさんの1冊で身につく~を見ながらのサイト制作6日目
— しいのき🐶Webデザインと動画編集 (@ShinokiDesign) July 30, 2020
今日はタイル型サイトのコーディングのレスポンシブ対応でしたが上手くいかない…!!
本当は画像が3個→1個になるはずなんですが…🤨#webデザイン勉強中 pic.twitter.com/PMDFJrua0s
この本は勉強しながら1つサイトが出来上がってしまうので、
自分で写真を変えてみたり、jsを入れてふわっと画像を表示してみたりカスタマイズして練習をしていました。
昨日作ったメニューページをScrollReveal.jsを使ってふわっと浮かび上がるようにしてみました。
— しいのき🐶Webデザインと動画編集 (@ShinokiDesign) July 31, 2020
jsをDLしなくてもweb上のデータを読み込むだけで使えるし、
htmlに直接指示するだけだったので簡単にできました(^^)/
こちらの記事を参考にしましたhttps://t.co/BjhVutZvKy#webデザイン勉強中 pic.twitter.com/Oo2OC9Wui4
これを土台にして、サイトを作り始めました(*'ω'*)/
3 デザインをする
構成はよっしーさんのポートフォリオが凄く分かりやすかったので、お手本にさせて頂きました!
実際にデザインをしたのはTOPページだけで、下層ページはデザイン無しでコーディングだけで作りました。
また、土台のサイトがあったので見せ方はほぼ決まっていて、
デザインをしたのは中の要素や、見出しのフォント、ボタンくらいなのですぐ終わりました。
時間がかかったのはTOPページのロゴですね。
あとSNSのアイコンも自分でiPadのProcreateというアプリで手書きしました。
4 コーディングをする
土台があったのであとはデザインをはめ込んでいって、
実際に見ながら調整していきました!
今日はポートフォリオサイトのトップのデザインが出来たので、試しにコーティングも進めてみました😄
— しいのき🐶Webデザインと動画編集 (@ShinokiDesign) September 10, 2020
たまにやらないと忘れるる🙉💧
ここ数日ポートフォリオサイトを仕上げてしまおうと奮闘中🙉💦
— しいのき🐶Webデザインと動画編集 (@ShinokiDesign) September 14, 2020
もー動きつけ始めたら楽しくて楽しくて止まらない😂笑
そしてデザインの技術が全然上がってなくて焦る🙉💦器用じゃないからあっちもこっちも出来ないので一つずつ終わらせよう😓
今月中に公開目標(ง •̀_•́)ง🔥
5 TOPに戻るボタンとシェアボタン
TOPに戻るボタンはいろいろなサイトを拝見して実装しました。
PCで見たときに左側に固定されるシェアボタンは
かおりさんのサイトを参考にさせて頂きましたm(__)m
6 炭酸のしゅわしゅわ
私のイメージではサイト自体がトロピカルジュースの中のような感じにしたかったので、
炭酸の泡が下からあがってくるエフェクトが必要でした。
うーんと思いつつ検索したら一発ででてきて、
「こ、これだ!!」と早速試したら、簡単に実装できました(´;ω;`)
2012年の記事ですが、まさに私がやりたかったjsを作ってくださっていて
みかんさんにも感謝です。
▼参考にしたサイト
7 サーバーを借りてドメインを取る
ポートフォリオの住所になるところですが、
実はすでにWordpressで作ったポートフォリオサイトがあったので
ワードプレスをアンインストールして、そちらに新しくサイトを作りました。
▼サーバーレンタル時の手順備忘
①ロリポップでサーバーを契約
②独自ドメイン「shinoki.design」を取得(ムームードメイン)
③ロリポップのFTPからサーバーにアップロード
8 大変だったことの備忘
1位 ページにベーシック認証をかける
2位 レスポンシブ
3位 ローディングアニメーションを実装する
これまでコーダーさんに「ベーシック認証かけといてください」って軽々しく言ってた自分がお恥ずかしいことに、これに一番てこずりました。。
「ディレクトリにベーシック認証をかける」のは結構簡単でした。
ただ「ページごとに」になると難しく、さらにサーバーがロリポップだったことで、その「ページごとに」ということが最後までできませんでした。
ポートフォリオサイト、やっとレスポン調整が終わりました😭👏
— しいのき🐶Webデザインと動画編集 (@ShinokiDesign) September 24, 2020
今日は版権のある画像のページにベーシック認証かける作業に2時間もかかってしまった…:;(∩´﹏`∩);:
そこでもうベーシック認証をかけたいページの階層を移して、
フォルダごと認証をかける方向に変更しました。
そうするとURLが変わってしまうので、ちくちくURLを変えていくという地味に面倒くさい作業をするはめになってしまいました。。
2位のレスポンシブは、本当はタブレットにも適応したかったのですが
なぜかタブレットを入れるとスマホビューで見れなくなってしまい、
なくなくタブレットビューを削りました…。
ワードプレスをサーバーからアンインストールして、ついにNewポートフォリオをサイトにアップロードできました✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌
— しいのき🐶Webデザインと動画編集 (@ShinokiDesign) September 23, 2020
でもレスポンが上手くいってなくて、スマホで見るとずれてて泣いてる😭w
3位のローディングアニメーションは、
こちらもWEBクリエイターズボックスのmanaさんの記事を参考にして作りましたが、
アニメーションを表示させる位置を変えるのが難しくて、てこずりました。
▼参考にした記事
9 身近な人からのフィードバック
私がもっとも信頼している旦那氏に一番最初にサイトを見てもらいました😄
感想は「めっちゃ夏!!w えらいこったの作ったねw」でした。
なにはともわれ笑ってくれたのが一番嬉しくて、
”凝ってる”と言ってもらえたのも嬉しかった😊
そして、版権のある画像にベーシック認証をかけた方がいいとアドバイスをもらって、「確かに!」と思ってすぐ作業しました(^^;
実績ページはデザインが一番下にあるよりも、
上にあったほうがいいと感想をくれたのですが、
お手本にしたよっしーさんのサイトも下に画像があるけど、私はそんなに不便に感じなかったので、とりあえずままでいいかなと思ってます(^^;
9 サイトを作ってみて
「作るのって楽しい!」これに尽きました!
基本的にコーディングには苦手意識があって、デザインは時間を忘れてできるのですが、コーディングは苦痛でした。
でもこのサイトを作っているときはずっと楽しかったです^^
そして、自分は「見てくれた人がクスっと笑顔になって、誰かにシェアしたくなるような仕事に携わりたい」という根本に戻りました。
そんな仕事に携われるように、デザインのスキルやロジックを磨きたいと
改めて思いました。
このサイトを作り上げられたことで、ずっと心のどこかにあった
「自分はやり遂げられない」という自信のなさが少し減った感じもします。
そして一番感じたのは「作業する時間確保の大切さ」でした。
これが一番のネックでした。
構想は6月からと着手するまでに時間がかかりましたが、
実際に作業をしたのは2週間くらいなので、2週間腹をくくって集中すれば意外といけたので、参考になりましたら幸いです😊
10 まとめ
このサイトを作り上げるために、
いろいろなサイトを参考にさせていただきましたm(__)m
manaさん、よっしーさん、みかんさん、かおりさん…
なんとみなさん女性!!😳(今気づいた)
後世のために情報を残してくださって本当にありがとうございます。
YDK(やればできる子)を体現できましたm(__)m
このサイトがきっかけで、転職活動が少しでも上手くいくといいなぁ。。!!😖
頑張ります!!!💪( `ω´ 💪)🔥🔥🔥
ご覧いただきありがとうございます☺️Webデザイナーの方のためになる記事、一緒に勉強が頑張れるような記事を書きたいと思っていますので、応援していただけるととても嬉しいです。