制作備忘録

【制作備忘録】ポートフォリオサイト編/デザイン #2

随分と時間が経ってしまいましたが、やっとデザインが完成したので記録としてブログを更新。

前回の「【制作備忘録】ポートフォリオサイト編/レイアウト #1」記事で言っていた内容との変更点もあるので、デザインを作っていく中で参考にしたサイトなども記録に残していきたいと思います。

【制作備忘録】ポートフォリオサイト編/レイアウト #1今日から本格的に営業や転職活動でも使えるポートフォリオサイトの制作をはじめようと思い、タイトルにも書いている通り制作物の過程を記録してい...

ポートフォリオサイト編/デザイン #2

PC

※クリックすると画像が拡大します

スマートフォン

※クリックすると画像が拡大します

今回はPCとスマートフォン用として2種類作りました。レスポンシブ対応でうまく画像のように表示ができればいいなと思ってます。

最初は簡単なレイアウトからコーディングしながらデザインも考えていこうと思っていたんですが、やっぱりデザインが確定していない中で作るというのは結構むずかしかったです。(笑)

なので一度、イメージを固めてから作っていくことに決めました。

Photoshopでデザイン

ポートフォリサイトでのデザインでは使い慣れているPhotoshopで作りました。

AdobeのXDを使おうと思ったのですが、初めて扱うソフトは時間もかかりそうだったのでやめました(笑) でもXDのレクチャー動画を観てみると今後は使っていった方がもっとスムーズにデザインしやすくなりそうだなと感じました。

デザインで参考にしたサイト

今回は2つのサイトを参考にさせて頂きました。

「UNDERLINE」さんのトップページ

「はにわまん」さんのお問い合わせページ

どちらもデザインもシンプルで色合いも見やすく作られていて参考にさせて頂きました。もっと自分のポートフォリオサイトではどんな仕事内容が受けられてどんな仕事が受けれないかを具体的に記載する必要があるなと思っています。

まだまだ、課題は沢山ありますが、こだわってしまうとキリがないので、まずは完成を目指していきたいと思います。

言語を変更

いろいろと考えた結果、今回のポートフォリオではSassを外すことにしました。

■ポートフォリオで使用する言語

・HTML
・CSS
・jQuery

CSSも詳しくないのにいきなりSassを使用してコーディングしていくのはハードルが高いなと感じて外しました(笑) 一度、ポートフォリオを完成させた上でどのようにCSSをSassでまとめたら効率がいいのかを見ていきたいと思います。

サイト内のポートフォリオは仮のコンテンツ


サイト内のポートフォリオでは仮として4つのコンテンツで作っていますが、自分にここまでの制作物は現段階ではないので変更していくと思います。

まずは「Web Desing」でコンテンツを絞って、余裕ができたら増やしていけたら追加していこうかなという感じです。

福岡に引越し・そして入りたい会社も

実は3月ぐらいから東京から福岡に引越しました。

入りたい会社も決まりまして、中途入社するにはポートフォリオも必要みたいなので今回制作しているポートフォリオサイトをポートフォリオとして提出してみようかなと思っています。

なるべくなら今月中に仕上げて就職活動をするのが目標です。

次回からは部分的に更新

次回からは部分的にコーディングして完成した部分を都度、記録として更新していきます。

具体的には以下の順番に更新を考えています。

・ヘッダー
・About
・Works
・Portfolio
・Contact

参考にしたコードやサイトなども紹介しながら「制作備忘録」としてまとめていこうと思います。