手作り雑貨のポートフォリオ〜aoraetoa crafts〜

侍エンジニア塾で学習を初めて、一番最初に取り組んだのはHTMLとCSSでした。
Webサイトの見た目部分です。

ファーストレッスンで、「受講中にWebサイトを３つ作ります」と言われました。
そう言われて、真っ先に思いついたのが自分の趣味のクラフトを集めたサイトを
作ろう！ということでした。

ということで、一番最初に制作したWebサイトは私が手作りした
雑貨を集めたポートフォリオです。

このサイトはBootstrap４の無料テンプレートを使用しました。
使用したテンプレートはMegakit
URL：https://preview.keenthemes.com/megakit/

Megakit を自分の作りたいサイトに合わせてHTMLや CSS をいろいろ
変更しながら初のオリジナルWebサイト制作です。
なぜ、初のオリジナルWebサイトかというと、
このレッスンの前に、HTMLとCSSの練習で模写サイトの作成をしていたからです。

Bootstrapのテンプレートを使用すると、見た目部分や動きは
既に出来上がっているので、あとはこれにHTMLとCSSを修正していけば
Webサイトが出来上がります。

私は、Javascriptがそんなに得意ではなかったので、BootstrapのJavascriptが
実装されているところは、とーーーってもありがたかったです！
Bootstrapの使い方については、後日まとめていきたいと思います。

このサイトを作っているとき、考えたこと。
＝デザイン的なこと＝
・サイトのカラー
・自分の作る様々な種類のクラフトと相性がいい色、写真
・写真選び（自分の？無料の？）
・ロゴはどうする？
＝エンジニア的？なこと＝
・導線（人の目線の動き）
・ページ同士の繋がり方
・配置

結果、とりあえず各ページを作りながらいろいろ仕上げていきました。
使用している写真は、全て今まで撮りためていたもの。
一番時間がかかったのは、写真の選定かも。
カラーはいくつかに絞って、ある程度の枠組みができたところで検討。
ロゴは以前作った消しゴムはんこをアレンジしました。
メニュー内の並べ方も繋がりが出るように意識しました。
ギャラリーはTOPページしか見てもらえないことも考慮して
TOPページに数点入れて、そこからギャラリーページに飛べるように。

雑貨だけを掲載する予定でしたが、せっかくなので友人たちの結婚式の時に作った
ブーケも掲載することにしました。
振り返ってみると、友人それぞれオーダーするものが違って、
個性が出てるなと感じたページでした。
このようなサイトを作る予定もなかったため、作成したブーケの写真が少なかったことが
とても残念。ブーケ単体の写真って意外と撮らないものですよね(^◇^;)
そして、結婚式の最中も新郎新婦メインなので、ブーケがほとんど写っていなかった・・・