CSSで3カラムや7カラムなどの横幅をぴったりにできる「calc関数」

レスポンシブデザインはもはや当たり前になっている今日このごろ。
皆がスマホを使っている今の時代。どんなサイトでもスマホから見られる可能性はあります。
どんなにあなたのサイトのターゲットとしているトラフィックがデスクトップからであったとしても、スマホからのアクセスを無視していいわけありません。

これからホームページを作る場合、余程の理由がない限り、レスポンシブ、スマホ対応にするべきでしょう。

さて、そのレスポンシブで作る時、たまに遭遇する「3」や「7」といった割り切れない値のコンテンツを横に並べる時。今までだと例えばカラムが「3」の場合、

と書いていました。
ただこれだと1%余り、場合によっては1pxぐらい空白が出来たりします。
table-cellという方法もありますが、flexboxを使いたい場合はtable-cellは使えません。

そこでCSS上で計算式を書けるcalc関数が便利なのでご紹介します。
続きを読む

WordPressのログイン画面のロゴと背景を変える方法

Wordpressログイン画面

Wordpressログイン画面 Webデザイン

WordPressのログイン画面は通常、上のようなロゴ画像が表示されます。コーポレートサイトやお客様に渡すとき、上記のロゴだとデザイン的にもイマイチですし、コーポレートサイトであれば自社のロゴがあるので、デザインも合わせたいところです。

今回はロゴ画像の変更と合わせて背景の変更もしてみたいと思います。

続きを読む

jQueryのスライダーをホームページに取り入れる時に注意したいこと

サムネイル

トップページなどでよく使われるスライド式に自動で画像が切り替わるスライダー。ローテーションバナーやカルーセルと呼ぶこともあります。

スライダーを複数のコンテンツや写真を見せるのに便利で、かっこよくも見えます。
jQueryやWordpressのプラグインも充実しているので、設置もそこまで難しくありません。

しかし「設置が簡単でかっこよく見える」などという理由だけでスライダーを設置するとかえってユーザエクスペリエンスや滞在時間の低下になったりします。

スライダーを設置する時に注意しておいた方がいいポイントをいくつか紹介します。
なおここで紹介するのはある程度共通しているポイントではありますが、もちろん例外もあります。これがベスト!という答えはサイトの目的、目標によって変わってきますので、あくまで参考程度に思ってもらえればと思います。

1, バナーは3〜4枚程度に

ホームページによりますが、トップページに滞在する時間は長くてもせいぜい20秒程度です。ユーザはファーストビューの2秒程度で自分にとって価値のあるページか判断すると言われています。
この限られた時間の中で、バナーを何枚も設置しても、すべて見てもらえるどころか、存在しないも同然である場合がほとんどです。見きれない程のバナーを設置してもクリックもされず、画像の読み込みに無駄に時間を使ってしまうだけになります。

トップページのバナーは新鮮な情報を掲載し、時期が過ぎたら潔く外す方が他のバナーを見ても機会が増えるので外しておきましょう。枚数も3枚程度を目標にしましょう。

2,  サムネイルを付ける

サムネイル

順番が後ろにあるバナーほど、ユーザに見てもらえる確率は低くなります。
特に最後の方など、余程ユーザが興味を持って辛抱強く待ってくれない限り見てももらえないでしょう。
サムネイルがあることで、ユーザが直感的に見たいバナー(情報)を選ぶことが出来ます。
よくバナーの枚数だけがわかるように小さいアイコンだけがついたものもありますが、クリックもしづらく操作性も悪いです。
サムネイルも写真やイラスト、コピーなどを工夫して、ユーザがより直感的に判断できるものにすることで、クリック率アップにつながります。

3, 不快に感じない表示時間に

表示時間

なるべく多くのバナーを見てもらいたいがために、表示時間を短くし過ぎたり、逆にじっくり読んでもらいたいから表示時間を長くし過ぎたりと、どちらもユーザエクスペリエンスの低下になります。読むのにかかる時間はデザインの可読性や、人によって違うので、これといった秒数で表すことはできません。
マウスオーバでローテーションを停止できたり、ユーザが自分のペースで情報を見ることが出来るようにしてあげましょう。

まとめ

いかがでしょうか。
上記はスライダーを設置することを前提にしていますが、スライダーは必ずしも必要なものではありません。見栄えもするし、情報を多く掲載することが出来ますが、それがかえって不快に感じることもあります。スクリプトを使うのでブラウザによってうまく動かない場合もあります。
ユーザエクスペリエンスを下げないように、よく考えた上でスライダーは設置しましょう。

CSSで高さを固定せずli(div)を正方形にして並べる方法

CSSで正方形を作る

写真をきれいに並べたい時は、僕はスクエア型(正方形)の枠を作って並べる時があります。

理由は縦長の画像と横長の画像が混在している時、段違いになってずれたりするからです。

普通、CSSで正方形にしようと思ったら横幅と高さを固定にしないといけません。レスポンシブみたいに横幅が変わったする時、高さを固定にしていると正方形じゃなくなってしまいます。

「高さ=横幅」みたいな感じで一行でかけるCSSが存在してたら楽なんですが、今のとこそのような書き方は無いので、ちょっと複雑ですがレスポンシブタイプで正方形を並べる方法をご紹介します。

続きを読む

PhotoshopデータをiPhoneでリアルタイムで確認出来る「Adobe Preview」

photoshop-preview

Photoshopでスマホサイトのデザインを行う際、今までだったら

Photosho → 書き出し → スマホに画像を転送

という手順を踏む必要がありました。
一度だけ確認するほどのものならそれもいいですが、画像を差し替えたり、色を変えたりと微調整を繰り返すのであれば、そのたびに書き出して、画像を転送しないといけないのでとても面倒ですし時間もとられます。

Photoshop CC 2015からPhotoshopで開いているPSDデータをiPhoneでリアルタイムで見ることが出来るようになりました。
これ、本当に楽なので是非使ってみることをおすすめします!

続きを読む