六本木ヨガ様ブログカスタマイズ

http://ameblo.jp/eriko-yoga-colors/
et_ame

「現在使用しているブログにWebサイトに近い機能を持たせる」 というコンセプトでアメーバブログのカスタマイズをさせていただきました。
ご本人様がお好きな「海」のイメージを取り入れながら、クリーンで爽やか+穏やかめな空気感を意識してデザインしています。比較的に情報量が多いので各コンテンツのメリハリは出して区別しつつ、カラーコントラストを抑えて柔らかくなるようにしました。

ブログサイトをWebサイト(コーポレートサイト等)として使用するにあたり、ブログサイトの構成そのままではうまく機能しない為、インターフェース部分は大幅に手を入れています。

User Interface

et_ame2

スクロール量に応じて分割されたインターフェース

  • ナビゲーションエリア
  • メッセージエリア
  • エントリーエリア
  • フッターエリア

の4つのパートを横割りにし、今どのパートを観ているかに応じたナビや関連情報を表示するように。

バイリンガル表示

受講されている方にも海外の方が多くいらっしゃり、「英語でのレッスンも積極的に行っている」という部分を強調するデザイン。
クリック一つで画面遷移なしで英語表記と日本語表記を切替え(※一部)

et_ame3
et_ame4_

サブナビゲーションをビジュアル化したスライダー

メインビジュアルになるスライダー(スライドショー)はグローバルナビゲーション(サイト内のメインナビゲーション)の「About」に付随するコンテンツの紹介として。
概要説明をビジュアルイメージ付きで訴求することで概要がイメージしやすい仕様に。

関連サイトをまとめたフッターナビゲーション

外部サイトへのリンクやマップ、著作者情報など、サイトそのものの主要コンテンツから出ていくものをすべてまとめてフッターエリアへ配置。情報の整理整頓を。

et_ame10
et_ame5_

コミュニケーションスペースにも拘りを

ブログにおいて読者・閲覧者とコミュニケーションを交わせる大切なスペースだからこそ、味気ないものではなく。

Author's Comment

アメーバブログではHtmlを編集できない為、構成やレイアウトの制約は大きくなります。その為、多くのブログでは似たようなつくりになっていて「こういうかたちにしかならない」と思われている部分が少なからずあると感じています。
しかし、ちょっと工夫をすることで機能的かつ魅力的なビジュアルやシステムを備えたデザインにすることができます。
多くが似寄りであるならば尚、オリジナリティの高いものにはプレミアム感が強まります。

工夫や拘りのあるいろんなものを使って、同時にいろんなものを観ていってただきたい。私はそう考えています。

制約が多い中で行う制作で様々な工夫をこらすことは新たな発見や自分のスキルアップにもなりますね。そういった意味でもアメーバブログのカスタマイズは好きなタイプの制作の一つです。