SWELLカスタマイズ事例 – いぬのしっぽ ねこのひげ

ポートフォリオ的な画面構成

全体的にモノトーンで余白をふんだんに使用したシンプル・ミニマルなデザインにしています。「保護犬・保護猫」に関するライターとしての活動を伝えるポートフォリオ・サイトとして位置づけ、コンセプトとプロフィールを上部に配置しています。

ブロークングリッドにイラストを配置

ブロークングリッドのテキスト領域やCTA部分に、犬と猫のシルエットのイラストをCSSで配置しています。

フルスクリーンメニュー

画面右上にハンバーガーメニューを固定配置。クリックすると「開閉メニュー」に登録したブログパーツをフルスクリーンでオーバーレイ表示します。

足跡の背景アニメーション

ページ閲覧中に、猫ちゃんたちが画面を走り回って邪魔してきます（笑）
（記事ページも同様に）

Googleフォントの使用

サイト全体で「しっぽり明朝」というGoogleフォントを使用しています。

サイドバーのランダムシルエット画像

サイドバー見出し部分の犬猫のシルエット画像は、画面を読み込むたびにランダムで差し変わります。

サイドバーのポチップ領域

サイドバーのに表示しているポチップ部分は、「Flickity」を使用したカルーセルスライダーを埋め込み、複数のポチップをスライド表示しています。ブログパーツで簡単に管理できます。

べにさんのブログを見て、保護犬や保護猫について興味をもっていただけたらうれしいです。