こんにちは、miccoです



今日は明治製菓のミルクチョコレートのモバイルサイトです




mobacco




見るからに女子が好きな感じ!



めちゃくちゃかわいい!




チョコ色を大切にしたデザインだと思います




モバイルサイトにしては余白部分がすごく多い印象がありますが

実際に実機でスクロールすると余白の理由がわかったり




それぞれのコンテンツを選択している際に

ちょうどよく中心にくるようにデザインされています



ミルクチョコレートがしっかり印象付けられるのもなかなか



無料でダウンロードできるきせかえツールも可愛いですよー!

無料とは思えないクオリティです








一つ惜しいと思うのが

一度見て満足してしまうサイトであるということ





一度見て、一度ダウンロードして

それで満足してしまう





このページから更新性を全く感じられないので

再びアクセスしようと思えない





どのサービスにもいえますが

アクセスするきっかけ作りをしっかりしているかしていないか

折角いいコンテンツを提供していても

ここがおざなりになっているともったいないですね






micco

どうもみっこです!

久しぶりで申し訳ありません‥orz




今回はいつもとちょっと違ったエントリーでいってみたいと思います!




サイトのデザインではなく

サイトデザイン、コーディングをする上でのちょっとしたテクニックのご紹介







リンク用画像を作るときはマージンも画像内に含めて



ということで!



モバイルサイトでも画像にリンクをはったりする機会は多々あるかと思います

そんなときの小技です!





↓たとえばこんなボタンのような画像

mobacco




普通書き出しする際は下記のように画像ぎりぎりで

書き出してしまいがちです

mobacco



結果実機で選択した際にユーザーの目には

下記のように見えてしまいます
mobacco



これでは黄色いボタンの枠に

もともと黒いラインがあるかのようにも見えてしまいます


また、ボタンの色が黒や濃いグレーだった場合

選択していることに気付けないユーザーが出てしまう危険性があります







そんなときは下記のように少しマージンとって

画像を書き出すだけで

mobacco




下記のように選択している部分が明確になります

mobacco





こういった小さな改善も意識してコーディングしていけるといいですね






最後にちょこっと補足



この小技を使用することで画像サイズが大きくなってしまうことをお忘れなく!



サイズが大きい=表示に時間がかかる

ということです!



UIのわかりやすさと表示速度などのユーザーストレス

使いどころを意識して使う必要がありますね!






どもやきとり
おかんですokan


とてもひさびさです(´-ω-`)
すみません(´;ω;`)


ポーケンって知ってますかena
ジャンケンじゃないですよ(´・ω・`)
詳しくはこのサイトをみてみてくだしあ目
モバモバの方ならちょっとほしい(*´・ω・`)
とか思うかもですああっ
・・・流行ったの結構前だけどねふっ

mobacco-ポーケン


↓QRコードはコチラ↓
mobacco-ポーケンQR



■■■■気になったこと■■■■

1
メインメニューがめんこい

2
トップのナビゲーションが
どのページにもあるのが
邪魔だと思った

3
「ポーケンの使い方」とか「ポーケンって何?」
のページには「さっそくポーケンを買ってみよう」
とかのリンクがあるといいなぁ。。。とか思ったり

4
このページも html だった
x-html のページって少ないのかしら

5
よーくソースをみると
アクセスキーの7番が6番になっていた
どんまい
まぁそもそもこんなにアクセスキーいるのか
って話ですけど

6
あとやっぱりテーブルコーディングは
機種依存があって
あんまり使わないほうがいいなぁ
と実感した

7
<hr />の書き方が独特で

<hr width="100%" size="1" noshade="noshade" color="#ffffff" style="border: 1px solid rgb(255, 255, 255); margin: 8px 0pt; padding: 0pt; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 100%; height: 1px; color: rgb(255, 255, 255);"/>

こんな感じ

noshade="noshade"

ってなんぞやって感じ
もしかしてこいつを使えばラインがきれいに表示されるのかもしれない
ちょっと使ってみる価値はありそうだ
html じゃないとダメなのかな。。。


■■■■■■■■■■■■

おしまい