ポートフォリオサイト
Comment
就職活動用に作ったポートフォリオサイトです。
| 制作期間 | ２週間 |
|---|---|
| 使用技術 | HTML, CSS, JavaScript |
| レスポンシブ | 対応 |
| 完成品 | 公開（このサイト） |
制作意図
就職に向けて自分をアピールできる作品が欲しいと思い、制作に至りました。
今までと違い、ワイヤーフレーム作成、デザインカンプ作成、コーディングと丁寧に手順を踏むことを重視しました。
制作手順
ワイヤーフレーム作成
色々な方のポートフォリオサイトを巡りながら、どのようなページや項目が必要か確認してスケッチブックにメモしました。 そのメモをもとにざっくりとした配置を決めたり、自己紹介の内容を考えたりしました。
デザインカンプ作成
Illustratorを使ってデザインを作成しました。 伝わりやすいポートフォリオサイトを目指してじっくり時間をかけて仕上げました。 トップページを飾るためのイラストもIllustratorで作りました。
HTML,CSSコーディング
後から作品ページが増えることを考慮して、なるべく分かりやすくきれいなコードを書くことを心がけました。 整理された親子関係や規則性のあるクラス名、レスポンシブにも対応しやすいような幅や高さ、余白の設定を行いました。
自己紹介、作品紹介の記述
コーディングでデザインの型ができたら、内容を考えて記述しました。正直一番難しかったです。 どんなことを書きたいかは、ワイヤーフレーム作成時にメモを残していたので、そこから広げていきました。
JavaScriptによるアニメーションの実装
jQueryを利用して、ページ遷移にちょっとしたアニメーションを加えました。 アニメーションのアイデア自体はコーディングの時点で頭の片隅にあって、それが実現できるように意識してコーディングしたため、 思い通りのアニメーションを実装することができました。
制作で感じたこと
今までは「とにかく完成させないと」と、がむしゃらに取り組んでいたところがありましたが、今回は特に丁寧さを意識して、 その大切さを知りました。ひとつひとつの工程をきちんと行うことで、次に余裕ができさらにこだわることができました。 実際の業務では、1人ではなく後の工程に別の人がいると思います。そういった状況で、今回のように次のことを考えた作り方をして、良いバトンパスができるようになりたいと思いました。