制作概要
当サイトは求職活動に向けたポートフォリオサイトのリニューアルを目的に制作しました。
以前のサイトは約6年前(2020年)に制作したもので、時間の経過によるデザインや実装面の古さに加え、JavaScriptを使用していなかったことによる機能面の制約、一部のレイアウト崩れなどの課題がありました。
また、サイトの使い勝手にも改善の余地を感じていたため、これらの課題を見直し、現在の知識や技術を活かしたサイトへリニューアルすることにしました。
なお、制作時間は試行錯誤を含め、多めに見積もっておおよそ240時間ほどかかりました。サイトの構築に加え、以前のサイトからの記事の移行や、新規記事を含む全46記事の再推敲も行っており、掲載コンテンツの整理・改善にも時間をかけています。
デザインについて
スタイル・トーン・色の理由
主役である作品を引き立てるため、ベースは広めの余白を活かしたミニマルなモノクロトーンで構成しました。
アクセントには青緑色を使用しています。青の落ち着きや信頼感、緑の調和や安らぎといったイメージを踏まえサイト全体に落ち着いた印象を与える色として選びました。私自身が好きな色であることも理由の一つです。また、強調箇所やフォームの必須項目には視認性を考慮して赤色を使用しています。
一方シンプルさの中にも単調になり過ぎないよう、線や幾何学的な模様を用いた装飾も取り入れ透明度や配置を調整してコンテンツを邪魔しないアクセントとなるよう意識しました。
ロゴと画像の意図
自身のイニシャル「AK」を掛け合わせたシンボル。交差しながら伸びていく二本の線には、自身と関わる方々が制作物を通じて繋がり、共に発展していくという願いを込めています。
また、サイト内で使用しているメインビジュアルやアバターの画像にもそれぞれ選定した意図がございます。もしご興味がございましたら、プロフィールページにてご紹介しておりますのでご覧ください。
参考・参照情報
制作で意識・工夫した点
ブロックテーマで初のサイト構築
これまでクラシックテーマでの制作経験はありましたが、今回は直近に学習したブロックテーマをベースに、初めて独自テーマのサイトを制作しました。
今後を見据え、現在のWordPressで採用されているブロックテーマを実際のサイト制作に取り入れ、理解を深めたいと考えたことが、今回ブロックテーマを選んだ理由です。
また、AIを活用した開発にも初めて取り組み、PHP・CSS・JavaScriptを用いて実装したい機能を独自にカスタマイズしました。
ヘッダー
ヘッダー部分はブロックテーマのナビゲーション機能をそのまま使用せず、header.htmlを独自に構築しました。
PCではベーシックな横並び、スマートフォンではハンバーガーメニューから各ページへアクセスできるようにしています。また、WorksやBlogのサブメニューを開閉できるようにしました。
今回初めて、スクロールに応じてヘッダーを表示・非表示する機能も実装しました。下スクロール時にはヘッダーを隠し、上スクロール時には再び表示させることで、コンテンツを見やすくしながら必要なときにはすぐにメニューへアクセスできるようにしています。
なお、上記機能を実装したこともあり、コンテンツの閲覧性を優先し、今回はページトップボタンを設置しないことにしました。
メインビジュアル
トップページのメインビジュアルでは、画像の上に白文字と黒文字のタイトルを重ね、画像の境界に合わせて文字色が切り替わるように実装しました。
CSSの「clip-path」を利用して白文字の表示範囲を制御し、JavaScriptで画像の位置を取得することで、画面幅が変わっても画像と文字の境界がずれないよう調整しています。
Worksスライダー
同じくトップページのWorksでは、WordPressに登録した作品情報をPHPで取得し、Swiperを使用して投稿を自動的にスライダーへ反映する仕組みを実装しました。
また、カテゴリーごとに表示内容を切り替えられるようにしています。すべての作品を表示するのではなく、掲載したくない作品を除外できるようにするなど、表示内容も柔軟に調整できるようにしました。
さらに、画面幅に応じて表示するスライド数を変更しPC・タブレット・スマートフォンそれぞれで見やすくなるよう調整しました。
今回学んだこと・反省点
- ブロックテーマの構造やカスタマイズへの理解が深まった。
- PHP・CSS・JavaScriptを組み合わせ、実現したい機能を形にする経験ができた。
- AIを活用し試行錯誤することで、実装方法を調べて形にする力が身についた。
- 制作期間(約240時間)が長くなったため、今後は優先順位を意識して制作したい。
- 今後は今よりも、より拡張性やメンテナンス性を考慮した設計にしていきたい。
※もしよろしければ、旧ポートフォリオサイト完成時の記事もございます。ご興味とお時間がございましたら、こちらからご覧ください。
完成後改善・追加した機能
完成後もサイトをより良くするため自分で感じた課題に加え、事業所の支援員の方々に添削していただき改善・追加した機能を簡潔にまとめました。
第三者の視点を取り入れることで自分では気づかなかった課題を発見し、改善につなげることができました。
記事ページのサムネ画像へのリンク指定
サイトの添削時に支援員の方がサムネイル画像をクリックしている様子を見て、公開サイトがある場合は画像から直接アクセスできると便利だと考えました。
そこで、WordPressの標準機能では設定できないアイキャッチ画像のリンク先を、記事ごとに指定できる独自機能を実装しました。
詳細はアイキャッチ画像のリンク設定の解説記事をご覧ください。
実装時間：約7時間
※要件検討・実装・動作確認などを含み、記事作成にかかった時間は含みません。
ライトボックス(画像拡大機能)にcloseボタンを追加
同じくライトボックスの添削時に、元の画面へ戻る操作に戸惑う様子を見て閉じるボタンの必要性を感じ機能を追加しました。
また、ライトボックス内の画像を拡大した際にボタンと重なっても閉じるボタンの視認性を損なわないように工夫しました。
実装時間：約7時間
※要件検討・実装・動作確認などを含み、記事作成にかかった時間は含みません。
目次機能の追加
長い記事でも目的の情報にアクセスしやすくするため、目次機能を導入しました。ブロックパーツとして自作し、エディター画面から任意で追加できるようにしています。また、記事内のh2・h3見出しを自動で参照し、目次として出力する仕組みを実装しました。
詳細は目次機能の作成の解説記事をご覧ください。
実装時間：約14時間
※要件検討・実装・動作確認などを含み、記事作成にかかった時間は含みません。
コード閲覧機能の追加
今回のサイトではWeb制作の学習過程を記事としても記録しています。今後の制作にも活用できるようにするため各種コードを掲載できる「コード閲覧ブロック」を自作しました。
詳細はコード閲覧機能の作成の解説記事をご覧ください。
実装時間：約22時間
※要件検討・実装・動作確認などを含み、記事作成にかかった時間は含みません。
