自身のサイトを公開しました

2020/07/10

今日2020年7月10日はWebクリエイターの第一歩を踏み出した記念日です。

やっと自身のWebサイトを公開しました！

とりあえずまず、自分を褒めよう！
おめでとう！間違い無く3ヶ月前は絶対にできなかったことができた。
色々学んできたことの積み重ねだ。

なぜ自身のサイトを作ろうと思ったか？

こちらのnoteにまとめています。

・これまでプログラミング学習を行ってきた成果物をつくる。
・いずれWEB制作を請け負っていきたいのでポートフォリオサイトが欲しい。

この2つが主な動機でしたが、やはり自分自身の「ホームページ（って最近言わないですかね？）」がずっと欲しかった。SNSとかじゃなく、自分自身の価値観や生き方を表現できるサイトを持つのが念願でした。

開発している中で、最後の動機が強くなってしまい若干方向性がブレたのは反省。

最初、StartBootstrapのテーマをカスタマイズしていこうと考えましたが、やってみるとなかなか今の自分には難しかったです。作りたいサイトもシンプルなレイアウトなので、イチから全部作っていこうと決めました。

なお、お手本サイトをかなり参考にさせていただきました。

仕事で長年WordPressには触れてきたのですが、イチからインストールしてカスタマイズしていくのは初めての経験でした。たにぐちまことさんのYouTube、書籍を主に参考にして作成しました。

多くはないですが、動きを入れてみました。
・画像が読み込まれた時点でフェードインさせる
・マウスオーバーでスタイルを変える
・ページ上部に戻る
・ハンバーガーメニューのオープン、クローズ
など。

サイトのメインロゴの部分と、メニューと、画像上に表示する文字には
手書きっぽい文字を使用したかったため、
Google Fontsの「Shadows Into Light」を使用しました。

ブログ一覧や成果一覧ページのレイアウトはFlexBoxを利用しています。
この開発を通じて、だいぶFlexBoxに慣れてきました。自分の中で大きな成長です。

まあまあ上手くできたんじゃないでしょうか？これだって3ヶ月前の自分は絶対にできなかったことなので、凄いことです！仕事ではレスポンシブ対応の仕様設計をしていますが、触りだけでも制作の方がどんなことをしているのかを理解できたことが大きいと思います。

ざっとこんな感じでしょうか。

・ハンバーガーメニューで、領域外タップでメニュークローズ未実装。
・ヘッダーメニューの高さがindexページとそれ以外でずれる。
・ブログ個別ページのページネーション。

お手本としているサイトや、参考にさせていただいたたくさんの素敵なポートフォリオと比べると、自分のサイトって「心地良くない」んですよね。

ここはセンスとかもあるけど、そもそもレイアウトだったりフォントの色や大きさの使い方の基礎が身についていないからだなと感じます。今後改めてデザイン、レイアウトの基礎を学んだり、たくさんのサイトを模写していく中でセンスを磨いていきたいと思っています。

ポートフォリオにしたいのか、自己表現サイトにしたいのか。ここが実は曖昧で、伝えたいメッセージが良くわからなくなってしまいました。

最終的には、両方表現したいのです。ご縁あってWeb制作をさせていただく方にも、自分のことある程度知ってもらった上でお取引きできればと考えています。

ここは今後上手くバランスを取っていきたいので、良い見せ方を考えます。

上記の理由で、開発途中から何度見ても納得いかなくなってしまい時間がかかってしまいました。ポートフォリオにしたいと思っているのに、このサイトを見て「この人にWEB制作を頼みたい」と思ってもらえるのか・・・？と考えると怖くなりましたが・・・

Twitter でお知り合いになった皆さんのポートフォリオも、みんなカッコ良いんですよね。「たいしたことないなー」って思われないかなーとか。

まあでも、そう思われてもしょうがないんですよね。だって、よく考えたら自分は「大したことない」んですから。圧倒的に経験足りないし、まだまだ勉強すべきこともたくさんある。

今の自分のスキルは詰め込んだし、これが今の自分の精一杯ということで、まずは第一歩を踏み出そう。ここからまた改善していけばいい。

いずれ、「最初のサイトはこんなだったなー。ここから成長したな」と実感できれば良いなと思います。

↑