スマートフォンのボタン作りとフォントの指定とリキッドデザイン

スマホ向けフォント

またまたスマホ向けの話題です。

知人がやっている従業員数12名のホームページ制作会社では、スマホ向けサイト制作の案件がどんどん増えてきているようですし、うちにもPC向け案件でお世話になった会社からスマホ向けサイト制作の依頼・相談が増えています。

スマホ向けフォント
フォントは選ばない?

スマートフォン向けは「軽く」作る

スマートフォン向けサイトで注意をする点は、極力画像ではなくhtmlとcssで装飾をしていくことというのが基本です。

たとえばボタン

お申し込みは ここをクリック!

こういうのもフォトショップで作りたくなりますが、cssでグラデーションやボックスシャドウ、テキストシャドウを作り、タップできる範囲を広げるようにdisplay:blockを使い・・・と、丁寧に作っていくのが基本です。

フォトショップ大好きな私には面倒に感じていましたが、慣れてくると結構簡単。

ちなみにCSS3に関するソースは

.tel2 {
border-radius: 16px;
border: solid 2px #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4), inset 0 6px 0 rgba(255, 255, 255, 0.3);
display:block;
width: 90%;  /*親要素の90%幅に指定*/
background: -webkit-linear-gradient(top, #fff57a 34%, #ebd900 86%);
background: -moz-linear-gradient(top, #fff57a 34%, #ebd900 86%);
background: -o-linear-gradient(top, #fff57a 34%, #ebd900 86%);
background: -ms-linear-gradient(top, #fff57a 34%, #ebd900 86%);
background: linear-gradient(top, #fff57a 34%, #ebd900 86%);
text-shadow: 0px 2px 2px rgba(255, 255, 255, 1);
}

スマートフォンだけを考えれば、いらない要素もあります (-ms-や-o-など)。

スマートフォンの日本語フォント

iPhone ヒラギノ角ゴ W3 ヒラギノ角ゴ W6 ヒラギノ明朝 ProN(iSO 5だけ)を使っていますし、AndroidはDroid Fontをメインにしていますが、国産Androidは様々なフォントが入っているようです。
きっと、小さなスマホにたくさんのフォントを入れておく余裕がないのでしょう。フォントの種類は少ないようです。

ですので、font-famiyの指定はせずに、機種に依存したフォントで済ませます。

ただ、そうすると1行で表示されていたものが、デバイスによって見え方が違うため、印象が違う!ということになりかねません。

そのためには、デザインを確認していただく状態で ヒラギノやwindowsの場合はそれに近いメイリオを代用してテキストを配置していくのが良いのかな?と考えています。

windowでヒラギノを入れると数万円しますが、もっとスマホ向けが増えてきたらwin環境でも入れることを検討しなければならないかもしれません。

リキッドデザイン

その他リキッドデザインも必須ですね。
PC用ではあまりリキッドデザインは好きではなかったのですが、件数をこなしていくとなんかリキッドの良さを感じてきました。


#container {
	width: 96%; /*デバイスの96%幅に指定*/
	margin: 4px auto; /*上下に余白、左右はオート*/
	border: 1px solid #FCF; /*線を引いて*/
	border-radius: 16px; /*角丸ボーダーに*/
}

横幅はほとんどが%指定>親要素の何パーセント という指定。
デバイスが変っても拡大縮小してくれます。

-webkit-text-size-adjust: none; は好みですが、スマホを横にしたときに文字が拡大されるのをナシにしてくれます。
対応したいところだけでも良いかもしれないし、bodyとかに入れちゃってもOKです。

画面が小さいだけに、それほど凝ったことはできないのですが、その分ひとつひとつのパーツをhtmlとcssでしっかりと作っています。

ポケベルブームは30年位前?
じゃあ、あと50年もしたら「スマホ?そんなのあったね」ということになるのでしょうかね?

前回の記事でコメントは中のですが、ばらばらとメールを以前のクラスの生徒さんたちから頂き、
「もうちょっと書けよ!」ということでしたので、ばらばらと順不同ですが、スマホサイト制作の要点のみの記事でした。


One thought on “スマートフォンのボタン作りとフォントの指定とリキッドデザイン

コメントを残す

メールアドレスが公開されることはありません。