たきつぼ

つくったもの

たきつぼのモックアップ画像

たきつぼポートフォリオサイト

制作期間:5か月

企画 / デザイン / 写真 / 実装(HTML・CSS・JavaScript)

たきつぼにアクセス
木の葉

自己紹介サイトとしてリニューアル

リニューアル前のたきつぼは、たきぶろぐやSNSへのリンクが設置されているのみでした。

しかし、理由はともかくコンテンツを追加し、自己紹介サイトとしてリニューアルすることを決定。

これまでのSNSへのリンクに加えて、過去につくってきたもの、自己紹介ページを追加し、コンテンツの充実化を行いました。

たきつぼのスクリーンショット画像

上品、大人なイメージを伝えるデザイン

たきぶろぐのリニューアルデザインと同様、上品で大人なイメージが伝わるようデザインしました。

フォントはボールペンで書いたような「Zen Kaku Gothic New」を使用、英字は視認性を意識し「Lexend」を使用しています。

フェードインなどのアニメーションも適度な時間をかけることで、騒がしさや煩わしく感じないように調整しています。

たきつぼで使用されているフォント画像

モバイルファーストのマークアップ

リニューアル前と同様、モバイルファーストのマークアップを行っています。スマートフォンでのサイト表示速度の高速化が期待でき、最終的にはSEOにも良い影響を与えられると考えています。

スマートフォンのナビゲーションバー

サイト内の回遊性を高めるナビゲーションバー

スマートフォンでは、Material Designをベースとしたナビゲーションバーを設置しました。

パソコンでもヘッダーナビをスクロール時に固定し、サイト内の回遊性を高めて直帰率を下げる工夫を行いました。

いずれもカレント表示に対応しており、ユーザーの現在いるページが分かりやすいようにしました。

たきつぼのモックアップ画像

レスポンシブ対応

パソコンのみならず、スマートフォンやタブレットなど
あらゆる端末で快適に閲覧できるよう、レスポンシブに対応しています。