Design Ditail-デザインディテール

拡大表示

全体の雰囲気としては、御要望やご本人の嗜好からレトロな趣のある、やわらかめの空気感のあるデザインに仕立てました。 こちらのBlogの内容も、割とフレンドリーな感じで書いてらっしゃるので、あまりガチガチにイメージをつくりすぎずに ご本人様っぽさを出すことを重視しています。

UIデザイン

「スタイリッシュさと温かみが欲しい」とのことだったので 半透明デザインと角丸などを用いて 「今っぽさ」と「温かみ＋空気感」を演出。

普通の半透明デザインでは白や黒をベースとして 近未来的なイメージのサイバーめにつくることがほとんどですが、 オイルの瓶に見立ててデザイン。
透明感と温かみを両立できたと思います。
※御要望でモノトーンはあまり・・ということと、オーガニックオイルなども取り扱われてらっしゃるので そのニュアンスも込めて。

アメブロでは「いかにも」な
『メインビジュアルがあって、その下（上）にグローバルナビがあって・・』 といった『定型』ではなく、今っぽい感じにメインビジュアルとナビゲーションなどのパートを馴染ませたUIに。

アイコン類はテキストを排してピクトグラムのみにしているので、慣れない方用にカーソルオンでTips（説明）が表示されるように設定。
動きもちょっと遊び心あるモーションを加えて、閲覧者に楽しんでもらえるように作成。

アメブロの初期ナビゲーション（※上画像）の

• ブログトップへ
• 記事一覧表示
• 画像一覧表示

の箇所も、グローバルナビに合わせてピクトグラム仕様へ変更。（※下画像）
共通の項目に関しては同デザインのアイコンで。

フルカスタマイズ‥ってよく言うけれど‥

よく「アメブロフルカスタマイズ」と謳っていながら、
メインビジュアルとサイドバーのタイトル部分以外はまったく手を入れず、デフォルトのスタイルをそのまま使ってるところをよく見かけます。
サイドバーリストなどの余白調整もデフォルトのまま、あるいはスタイルもそのまま・・なんてところも・・。

また、コメント欄も色変更だけだったり、
一覧リスト箇所はまったく手を入れていなかったり・・
それでフルカスタマイズって謳うのはどうなのかなー・・とちょっと思ってしまいます。

「フルカスタマイズ」を謳うなら、やっぱり一覧リストやコメント欄までカスタムして欲しいもの。
特にコメント欄に関しては、読者の方との大切なコミュニケーションスペース。
ここにちょっと趣向をこらしたり、心地良くすることって、読者の方への「おもてなし」だと考えています。

アメブロなんてcssの設定だけしかできないうえに、ちゃんとそれぞれ個別のクラスなんかも振ってくれてるわけですし、やっぱ手を抜いちゃいけませんよ。
・・あくまで個人的な考えですが。

Organic make you happy!
http://ameblo.jp/happyoiloil/

あとがき

ウチは比較的、アメブロではあまり使われていない構成や 見かけないデザインを主に制作します。 しかし、完全に元のデザインからガラっと変えることが必ずしも良い訳ではありません。
元の構成も閲覧者の扱いやすさを考えてのこともあり、 それを使い慣れている人が多いことも事実。
ゆえに、そこを完全に破壊してしまっては、「使いにくい・分かりにくい」になってしまいます。

とはいえ、より善くする余地は存分にあるのも事実。 その観点に則ったうえで、改善しながら、新たなものを制作していけたらと考えています。
他とは完全に違う 斬新さ、オリジナリティあるもの、緻密につくりこまれたテクニカルなもの

それらは強力なインパクトや独創性を生むことができる半面、 閲覧者側にも相応のリテラシーを求めます。
特に初見ではちょっと面くらうこともあるかもしれません。

しかし「どちらのほうが優れている」ということはありません。 結局のところ、「適材適所」であり、「ニーズによるところ」です。

ただ、やはりありきたりなものや、『いかにもテンプレ』は魅力が無い。
「もっとこういうものがあれば・・」そんな声に応えられるようでありたい。
また、「こんなものしかない」と考えている方に「こんなものもあるんだよ、使えるんだよ」ということも ちょっと知ってもらって、色んな「可能性」を見てもらいたいとも考えています。