こんにちは、ヒカルです。
25日かけて作成しましたポートフォリオについて、こだわりのポイントやhtml,cssのテクニックを以下に記していきます。
ぜひ、一度ご覧ください。
テーマ設定
今回作成した上記のサイトはポートフォリオでもあり、名刺でもあります。
営業用にポートフォリオが必要であり作成を開始したのですが、実績を掲載するにしてもどこをこだわって、どこがアピールポイントなのかなど詳しく書きたいと思いました。
ただサイト上にそれらを書いていくとなると、文章や画像の量で読みやすさやが変わってきて、さらにレスポンシブも考えなければならず不便だということに気づきました。
そこでブログと連携させることが最適だと考えました！
さらにブログを載せるなら、私がどういう人物なのか、どんな考え方をして生きているのかを知ってほしいという思いが湧いてきて、人生遍歴や趣味、ライフスタイルを載せることになりました。
したがって、最終的にはポートフォリオでありながら、ある種アーティストのようなサイトの仕上がりを目指しました。
そして完成したのがもう一度載せますが以下のサイトです！
https://shimahika-blog.net/my_page/
さらにサイトの全体テーマはHOMEに示した通りです。
画像 こだわりのこだわり
まず一番に伝えたいのは、使用した画像全てに意味があるということです。
一番時間がかかった作業は画像選びと言っても過言ではありません笑
1枚だいたい2時間かけて選びました。
サイトの雰囲気に合いさらに私の思いとも合致している奇跡の画像を選び抜きました。 なのでどんな思いが込められているかも考えて見てみるとさらに面白いと思います！
例えば上の画像は 「好きな色に塗れるように型にはまらず好きで楽しい仕事をしています」 という思いがあります。
ちなみに両手を広げるこのポーズは自信の現れであり、前向きな気持ちに自然とさせてくれるそうです笑
HISTORY スライダー
このセクションではこれまでの人生で大きな出来事、変わり目となるようなことを記しています。
さらに未来のことも書いていて、理想の将来設計をしています。
技術的なことで言うと、このスライダーは以下のサイトのプラグインを画像の部分をテキストに変えて使用しました。
https://kenwheeler.github.io/slick/
なかなかいい応用をしたなと最初は思っていましたが、総評するとすごく使いづらかったです。
slick-slide(西暦が書いてあるところ)の部分のwidthが思うようにいじることが出来ず、Photoshopで作った丸と矢印のイメージとの大きさの調整に苦戦しました。
さらに調整がしづらいという点からスマホサイズに合わせるのが大変だったので別のデザインに変えました。
結果スライダーは自分で作った方が後々便利だと思います。
LIFESTYLE ボタンによるスイッチ
このサイトの中でもお気に入りなのがライフスタイルのところです。
シンプルで見やすく、それでいてクールでオシャレだと評価しています。
このセクションの中身をどんどん増やしていくことが人生の豊かさに繋がり、かつサイトのイメージアップに直結すると思うのですごく更新のしがいがあります。
技術的には難しくなく、それぞれの要素の正確な大きさを計算して配置することが重要になってきます。
まとめ
正直言って出来栄えに満足しています。
誰に見せても恥ずかしくありません。
自分用のサイトが作りたいという方はぜひ僕と一緒に作りましょう！！
最後まで読んでいただきありがとうございました！ ご連絡お待ちしております。