カテゴリー: Web Design

Google Maps APIを使って住所を出さないで地図を表示させる方法

Google map api

Google Map をホームページに埋め込む方法は大きく2つの方法があります。
まず最初は地名、建物名、住所を検索して「共有」ボタンから共有する方法です。

地図を共有する

こちらのやり方がもっとも簡単な方法です。
ただこちらのやり方では細かい設定を変更することが出来ません。

例えば、

  • マーカーを表示させない
  • 住所を見える位置に表示させない

などなど、細かく設定を変えてGoogle Mapを埋め込みたい時に使うのがGoogle Maps APIです。Google Maps APIは緯度、経度の値をもとにGoogle Map上にマーカーを配置することが出来るので、例えば住所のわからない地点にもマーカーを置くことが出来ます。

そこでGoogle Maps APIを使って地図の表示、マーカーを配置する方法をご紹介します。
完成はこんな感じです。

続きを読む

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

Wordpressログイン画面

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

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

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

続きを読む

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

サムネイル

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

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

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

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

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

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

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

2,  サムネイルを付ける

サムネイル

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

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

表示時間

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

まとめ

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

これからPhotoshopでWebデザインをはじめる人が覚えておくといい便利機能5選

レイヤースタイル

僕はWebデザイナーを始めた5年前からデザインはずっとPhotoshopを使ってきました。

最近ではIllustratorや何かと話題のSketchを使っている人も増えてきていますね。SketchなどWebデザインに特化しているのでどんどん勢力をのばしてるわけですが、僕はそれでもまだPhotoshopの方が好きですね。
自分がPhotoshopでWebデザインを行う理由として、

  • 写真を加工も一緒にできる
  • ピクセル単位でデザインできる
  • レイヤースタイルなどの種類が豊富
  • GIFアニメーション・シネマグラフが作れる

などが主な理由でしょうか。
それからPhotoshop CCに新たに「デザインスペース」というWebとアプリケーションデザインに特化した機能が追加されたりとSketchに負けじ劣らず、どんどん使いやすくなっているのではと思います。

PhotoshopでWebデザインをするデメリットと言いますか、Sketchとかと比べると操作性が直感的ではないので習得には時間がかかるのではないでしょうか。
Photoshopには本当に多くの機能があって、それを使いこなそうと思ったら経験と時間を積み重ねるしか無いのですが、はじめてWebデザインをする上ではいきなり全部を覚えるのは効率が悪い。

ということで、今回は最初に設定しておくと便利な機能を紹介します。
出来るだけ作りたいものや状況に合わせて説明したいと思います。

続きを読む

【Webデザイン】ページ遷移が気持ちいい海外サイト6選

KEKSELIAS

最近、フラットデザインやレスポンシブデザインも当たり前と言ってもいいぐらい増えましたね。少し前はスキューモーフィックデザイン(質感の再現を目指したリアルなデザイン)が主流だったのに、スマホやタブレットが浸透してから一気にフラットデザインがトレンドになったように感じます。

まぁ、そんな感じでみんながみんなフラットデザインを取り入れると、今度は個性やインパクトに欠けるってことになってきます。
CSS3のおかげで、CSSだけの構成のボタンも多彩な表現が出来るようになったんですが、でも何か足りないというか。むしろスキューモーフィックデザインの方が個性もインパクトもあるように感じますが、マルチデバイスとなるとこれもまた大変(汗

そこでフラットデザインで個性、インパクトを補う方法として増えているのが、アニメーションかなと。
GIFアニメーションも然り。それこそこれもCSS3のおかげでアニメーションも以前と比べてめちゃめちゃ簡単に取り入れやすくなりました。

ということで今日はアニメーションの中でもページ遷移に拘ってるなぁと思う海外のサイトを紹介します。

続きを読む