見出し画像

ポートフォリオを1から作ってみた話

しいのき | Webデザイナー

こんにちは！しいのき（@ShinokiDesign）です。


Webデザイナーの転職活動をするにあたって、
ポートフォリオをハンドコーディングで一から作りました！🙌🏻✨😭


Webのスクールに2回通ってるにもかかわらず、
1度も卒業制作を作り切れなかった私が生れてはじめてサイトを作り上げられたことに感動しております…😭


作った時に参考にしたことや思ったことを
備忘のために残しておきたいと思いnoteを書きますのでお付き合い頂けますと幸いです☺️



0-1　なぜポートフォリオサイトを作ろうと思ったのか


私は現在ECサイトの運用をしていまして、
デザイナーに転職するにあたってコーディネーターさんに紙のポートフォリオを送った際にこんなやり取りがありました。




Twitterでは省略していますが、実際は

「Web上にポートフォリオがあるとよりいいですね。
Webデザイナーの募集はWebのデザインを見たいので。」


と教えてもらいました。

5年ほど前にWebデザインのスクールに通っていたのですが、1から自分でサイトを作ったことはなく、、


人生で一度くらいはデザインからコーディングまで全て自分で作ったサイトをアップしたい！と思っていたので、いっちょ作ってみるか！と腹をくくりました(;´∀｀)



0-2　参考にしたポートフォリオサイト


未経験からWebデザイナーになった方のポートフォリオを沢山見ていたのですが、


その中で「こ、これは！！」と思ったサイトがありました(*'ω'*)


それがよっしーさんのポートフォリオサイトです！

1度見たら忘れない、唯一無二のデザインでありながら、
ご本人の人間性が凄くよく伝わってきて、
なおかつ「作ること」を楽しんでるのも伝わってきて、
「この人にデザインをお任せしたい！」と思える素敵なサイトでした。


シンプルなサイトにすれば、デザインの幅が広がって転職も決まりやすいかも？と思ったのですが、
よっしーさんのように、Web上にあるのに人間味が伝わってくるサイトがいいなと思い、構成や見せ方などもかなりお手本にさせていただきました！m(__)m


1　全体のイメージを決める


よっしーさんの場合、ご本人が好きな「宇宙」がテーマだったので、私の好きなもの、、「アメコミ風」にするか、「懐ゲー風ドット絵」「アウトドア風」・・？


といろいろ考えたのですが、
どれも私の要素ではあるものの「人間性」をあらわすものではないなとあれこれ思いめぐらせていました🤔

それでもなかなか決まらなかったので、
心を無にして、頭にぱっと浮かんだものにしよう！
と決めて無心になってみたら、
「南国の海の中に沈んでいく」イメージと「レモネード」が浮かんできて😳

「これだ！！」と思い、全体のイメージを
「海のような南国のブルーハワイレモネード🍋」に決めました☺️
めっちゃ夏っぽいサイトになったのに、作り終えたころには秋になってましたけどね…。はは。




2　土台づくり


今の仕事がサイトのコード修正が主なこともあって、
本を見ながらコーディングの練習をしていました。


Webクリエイターズボックスのmanaさんの著書
「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」で自分でサイトを1つ作ろうとしていました。



この本は勉強しながら1つサイトが出来上がってしまうので、
自分で写真を変えてみたり、jsを入れてふわっと画像を表示してみたりカスタマイズして練習をしていました。


これを土台にして、サイトを作り始めました(*'ω'*)/



3　デザインをする


構成はよっしーさんのポートフォリオが凄く分かりやすかったので、お手本にさせて頂きました！


実際にデザインをしたのはTOPページだけで、下層ページはデザイン無しでコーディングだけで作りました。

また、土台のサイトがあったので見せ方はほぼ決まっていて、
デザインをしたのは中の要素や、見出しのフォント、ボタンくらいなのですぐ終わりました。

時間がかかったのはTOPページのロゴですね。

画像1

あとSNSのアイコンも自分でiPadのProcreateというアプリで手書きしました。



4　コーディングをする


土台があったのであとはデザインをはめ込んでいって、
実際に見ながら調整していきました！


5　TOPに戻るボタンとシェアボタン


TOPに戻るボタンはいろいろなサイトを拝見して実装しました。

PCで見たときに左側に固定されるシェアボタンは
かおりさんのサイトを参考にさせて頂きましたm(__)m



6　炭酸のしゅわしゅわ


私のイメージではサイト自体がトロピカルジュースの中のような感じにしたかったので、
炭酸の泡が下からあがってくるエフェクトが必要でした。

うーんと思いつつ検索したら一発ででてきて、
「こ、これだ！！」と早速試したら、簡単に実装できました(´;ω;｀)
2012年の記事ですが、まさに私がやりたかったjsを作ってくださっていて
みかんさんにも感謝です。

▼参考にしたサイト


7　サーバーを借りてドメインを取る


ポートフォリオの住所になるところですが、
実はすでにWordpressで作ったポートフォリオサイトがあったので
ワードプレスをアンインストールして、そちらに新しくサイトを作りました。


▼サーバーレンタル時の手順備忘

①ロリポップでサーバーを契約

②独自ドメイン「shinoki.design」を取得（ムームードメイン）

③ロリポップのFTPからサーバーにアップロード


8　大変だったことの備忘


1位　ページにベーシック認証をかける
2位　レスポンシブ
3位　ローディングアニメーションを実装する

これまでコーダーさんに「ベーシック認証かけといてください」って軽々しく言ってた自分がお恥ずかしいことに、これに一番てこずりました。。


「ディレクトリにベーシック認証をかける」のは結構簡単でした。
ただ「ページごとに」になると難しく、さらにサーバーがロリポップだったことで、その「ページごとに」ということが最後までできませんでした。


そこでもうベーシック認証をかけたいページの階層を移して、
フォルダごと認証をかける方向に変更しました。

そうするとURLが変わってしまうので、ちくちくURLを変えていくという地味に面倒くさい作業をするはめになってしまいました。。


2位のレスポンシブは、本当はタブレットにも適応したかったのですが
なぜかタブレットを入れるとスマホビューで見れなくなってしまい、
なくなくタブレットビューを削りました…。



3位のローディングアニメーションは、
こちらもWEBクリエイターズボックスのmanaさんの記事を参考にして作りましたが、
アニメーションを表示させる位置を変えるのが難しくて、てこずりました。

▼参考にした記事


9　身近な人からのフィードバック


私がもっとも信頼している旦那氏に一番最初にサイトを見てもらいました😄
感想は「めっちゃ夏！！ｗ　えらいこったの作ったねｗ」でした。

なにはともわれ笑ってくれたのが一番嬉しくて、
”凝ってる”と言ってもらえたのも嬉しかった😊

そして、版権のある画像にベーシック認証をかけた方がいいとアドバイスをもらって、「確かに！」と思ってすぐ作業しました(^^;

実績ページはデザインが一番下にあるよりも、
上にあったほうがいいと感想をくれたのですが、
お手本にしたよっしーさんのサイトも下に画像があるけど、私はそんなに不便に感じなかったので、とりあえずままでいいかなと思ってます(^^;


9　サイトを作ってみて


「作るのって楽しい！」これに尽きました！


基本的にコーディングには苦手意識があって、デザインは時間を忘れてできるのですが、コーディングは苦痛でした。

でもこのサイトを作っているときはずっと楽しかったです^^

そして、自分は「見てくれた人がクスっと笑顔になって、誰かにシェアしたくなるような仕事に携わりたい」という根本に戻りました。

そんな仕事に携われるように、デザインのスキルやロジックを磨きたいと
改めて思いました。

このサイトを作り上げられたことで、ずっと心のどこかにあった
「自分はやり遂げられない」という自信のなさが少し減った感じもします。

そして一番感じたのは「作業する時間確保の大切さ」でした。

これが一番のネックでした。

構想は6月からと着手するまでに時間がかかりましたが、
実際に作業をしたのは2週間くらいなので、2週間腹をくくって集中すれば意外といけたので、参考になりましたら幸いです😊


10　まとめ

このサイトを作り上げるために、
いろいろなサイトを参考にさせていただきましたm(__)m

manaさん、よっしーさん、みかんさん、かおりさん…

なんとみなさん女性！！😳（今気づいた）

後世のために情報を残してくださって本当にありがとうございます。
YDK（やればできる子）を体現できましたm(__)m

このサイトがきっかけで、転職活動が少しでも上手くいくといいなぁ。。！！😖

頑張ります！！！💪( `ω´ 💪)🔥🔥🔥


ご覧いただきありがとうございます☺️Webデザイナーの方のためになる記事、一緒に勉強が頑張れるような記事を書きたいと思っていますので、応援していただけるととても嬉しいです。