今回は自作ホームページの作成プロセスを淡々と記事にしていこうと思います。
HTMLは一時期学んでいましたが、それはかなり昔の話。
また一から学び直すつもりで今回は制作していきました。
それと、あくまで「作ってみた」という体験の話であり、制作プロセスやコードなどを一から紹介するHow to記事ではないことをご了承下さい。
長くなるので記事は分けると思います。てことで目次。
はじめに
何故、ホームページを自作したのか？
コスプレのイベントに参加した際に、交流をした方々に名刺をお渡しするためです。
そしてその名刺に載せるQRコードを1つに纏めたかったのです。
名刺ってゴチャついてるより、シンプルで導線が分かりやすいほうがいいよなって思っていて。
最初はXとInstagramのQRを載せることを考えていたのですが、どうしても1つに纏めたいなと。
それと、今後の事を考えて自身のポートフォリオサイトが欲しかったので制作しました。
なので、今回制作したホームページはポートフォリオサイトも兼ねています。
何なら最初はポートフォリオサイトだけでいいと思って始めました。
でも、どうせ作るならちょっと拡張して自分のオリジナルホームページを作っちゃおうってことで、結局ホームページとしての機能を持たすようにしました。
結構最初から思いつきで行動を始めた感じです。
でも大変だしなぁ...って尻込みするよりはとりあえずやってみたほうがいいよねって感じで。かるーく始めました。
これだけは実現させたい！こだわったところ
完成したサイトはこちら。
mokusakuphotographer.github.io
トップページのスライドショー
アクセスした時に自分が今まで撮影した中でお気に入りの5枚をトップページにスライドショーとして載せています。
これは作ろうと決めたと同時にやりたかったものです。
今後7枚くらいに増やしてもいいかなとも思っていますが、トップページにそんなに居座ることってないですし、迷い中。
ポートフォリオページの見せ方
ポートフォリオページは頭の中で思い描いていたものが既に有りました。
「スナップ写真」、「ポートレート」、「動画関連」を3つに分け、ネット上の美術館のように写真類はタイル状に。
動画はあえて左右交互に配置。
こうすることで、単なるギャラリーではなく並べても美しく見えるようにしました。
全体の配色
これは作っていくうちに固まったものですが、自分の愛機である「SONY αシリーズ」のような配色にしました。
落ち着いたダークトーンに映えるオレンジ。
ホームページ自体に一貫性を持たせ、全体的な見やすさを意識しました。
基本設計とデザインの定義
制作するにあたり、全体のおおまかな構成を決めました。
・サイトの目的
先述した通り、「ポートフォリオサイト」と「ホームページ」の両立です。
・デザインコンセプト
SONY αシリーズを模した配色。美術館のように美しい写真・動画の配置。
・ページ構成
トップページ：お気に入り写真のスライドショーを表示
プロフィール：自分のプロフィールと好きなものを載せる
ポリシー：依頼などを受ける上での保険的な存在
スケジュール：参加するイベント予定を載せる
ギャラリー：ポートフォリオ。スナップ、ポートレート、動画で分ける
所持機材一覧：自分が所有している機材の一覧
コンタクト：依頼などの連絡先
以上、7ページで構成。
・どう作っていくか。公開はどうやるのか
HTML / CSS / JSを使用したスタンダードな構成。
動的構成にする意味が薄いので静的構成を選択。
静的・動的構成については以下のサイト様がわかり易く解説して下さっています。qiita.com
公開はGitHubで。理由は楽で無料だから。
ここまでをざっくりと決めて、後は作っていくうちに思い浮かんだアイデアをコードに反映させていく形で進めていきました。
使用したツール
今回の制作にあたり、使用したソフトなどを紹介します。
Visual Studio Code
超有名なコーディングソフト。
CopilotというAIが搭載されていますが、こちらは全く使用していません。
Google Antigravity
Visual Studio Codeでほぼコードを組んだ後に、ふと思い出して使用してみたコーディングソフトです。
こちらではAIを主に使用しました。
最初からこれ使っておけば良かったと少し後悔するくらいには使いやすかったです。
AIがこんなに進化しているとは...
コードにミスがないか精査してもらったり、JpegやPngという重い写真たちを一括でWebpに変換してもらったりとかなり助かりました。
Adobe Illustrator
ページの背景画像を作るのに使用しました。
Adobe Photoshop
こちらも背景画像を作るのに使用。
Google Gemini
実装したい機能のコードを教えてもらったり、デザインについてのアドバイスだったりの相談役になってもらいました。
ページごとの機能紹介
ここからは各ページについて、どのような機能を使用しているかを紹介したいと思います。
サイト全体
・言語切り替え機能
ユーザーが選択した言語をブラウザの記憶領域(ローカルストレージ)に保存し、次回訪問時にもその言語状態を維持させています。
日本語選択時は英語を非表示に、英語選択時は日本語を非表示に、とシンプルな手法 で行っています。かなり軽量でレスポンスも◎。
※PC版ページ
・ヘッダーの自動隠蔽＆追従
画面を下にスクロールした時はヘッダーを画面外へ退避。
上にスクロールした瞬間に再表示させる処理をしています。
これにより、スマホのような狭い画面でも閲覧領域を最大化させています。
※スマホ版ページ
・今いるページのハイライト
ユーザーが現在開いているページを自動で読み取り、ヘッダーの該当アイコンとテキストをオレンジ色に光らせる処理をしています。
一見当たり前の機能ですが、こういう細かい部分も大事ですよね。
・スクロール連動型アニメーション
交差監視APIを用いて、文字や画像が「画面内に入った瞬間」を検知して、下からふわっと浮き上がるように表示させる演出を採用しています。
些細ですが、こういうアニメーションがあると一気にサイトがオシャレに感じます。笑
・画像の保護
サイト内の画像に対し、右クリックでのメニュー表示やドラッグアンドドロップ操作をJSで無効化しています。
これだけでは完全な防御は不可ですが、簡易的な無断保存対策として採用しました。
特に作例などの保護は必須ですからね。ポートレートなんて尚の事。
トップページ
・自動スライドショー
大きな画像が5秒ごとにフェードイン・フェードアウトで切り替わるようにしています。
ここの画像は自分が特にお気に入りのものを表示させています。
※PC版ページ
・更新履歴
ホームページの更新履歴は必要不可欠でしたが、どのように表示するか迷いました。
色々考えて今の形に落ち着いています。
履歴は長すぎるのは嫌でしたが、過去の更新が見れなくなるのも勿体ないと思い、「過去の更新を見る」ボタンを実装して過去の更新履歴を表示できるようにしています。
※PC版ページ
ギャラリーページ
このページに関しては一番こだわりました。
なにせ自分が撮影したものや制作したムービーを置くページですから。
・3分割のパネル分解
今後コスプレイベントで出会った方々に見てもらうとなると、まずポートレートの作例は他の写真たちと分ける必要があると思いました。
自分自身も、スナップとポートレートは分けたかったですし。
「Snap」「Portrait」「Video」のパネルにマウスを合わせると、パネルが拡大して他が狭くなります。クリックで任意の作例ページに飛ぶことができます。
スマホでは、1回タップでパネルが拡大、もう1度タップすることで任意の作例ページに飛ぶようにしています。
※PC版ページ
通常、スマホにおいて2連続タップを素早くすると、ページが拡大しますが、これは専用のコードを仕込んで無効化させることで対策をしています。
・画像の拡大表示と高画質読み込み
「Snap」「Portrait」内の写真はクリックすることで拡大表示できます。
この時、最初は荒い画像を素早く表示し、裏側で高画質な画像を読み込んでいます。
読み込みが完了した瞬間に画像を差し替えることで閲覧者を待たせない工夫を施しています。
Xの画像表示と同じ感じですね。
このホームページではオレンジのバーで読み込みの進捗を表すようにしました。
スマホではピンチインを行うことで更に細部を見ることも可能です。
ギア(機材リスト)ページ
・カテゴリごとに分け、折りたたむ機能
あまりにも機材が多く、そのまま表示すると長くなりすぎてしまうので、カテゴリごとに分けて折りたたむ機能を採用しています。
各機材はAmazonへのリンクを貼ってますので気になったものの価格などを見たり、もちろんそのまま購入することも可能です。
※PC版ページ
コンタクト(お問い合わせ)ページ
・DMテンプレートのコピー機能
テンプレ機能はあったほうがお問い合わせの敷居が低くなるので、導入したい機能の一つでした。
英語表記にしても、きちんと英語のテンプレがコピーされる仕様になっています。
何故か無駄に余白ができてしまったり、コピー後に変な改行が挟まったりと意外と苦戦してしまいました。笑
こういう部分をAntigravityならAIが修正してくれるのでとても楽ですね。
※PC版ページ
スケジュールページ
最初は導入しようか迷ったページでしたが、せっかくホームページ作るなら導入しちゃえって感じでほぼ遊び感覚で導入したページです。
・受付中ボタンの発光アニメーション
オレンジ色のボタンを光らせて、「撮影依頼受付中ですよ」というのが目立つようにしました。これもAIのおかげで実装できた機能です。
このボタンをクリックすることで、コンタクトページへ飛べるようにもしてあります。
・イベントのリンクページとロケーション
どこのイベントに参加するのかが分かるように、各イベントにリンクとGooglemapで開催場所が見れるように各リンクを追加しています。
※PC版ページ
プロフィールページとポリシーページに関しては特別な機能は入っておらず、分かりやすくレイアウトをしただけです。
強いて言えば、プロフィールページに好きなものを掲示したくらいでしょうか。
ポリシーに関してはコスプレイベントについての側面が強めです。
実際に作ってみて
制作期間は約2週間で、正直めちゃくちゃ大変でしたが、自分の思った通りに機能が実装できたときの達成感は気持ちが良いものです。
見やすさと使いやすさ(各ページへのアクセスのしやすさ)、デザインを全て考えるのってとても大変だなと。
何気なく見ていたバンドのホームページだったり、ネット上に無数にあるホームページはよく考えられて作られているんだなぁと改めて痛感しました。
何のストレスもなくサイトを見れるのは、しっかりコーディングをしてくれる専門業者の方々が居るからこそなんですよね。
それと、AIがとにかくすごい。
もっと早くAntigravity使えばよかったと切実に思います...。
全体的には楽しんで作ることができました。満足です。
今後もギャラリーページは積極的に更新していくつもりなので、楽しみにしていただければ幸いです。
