はてなブックマーク

あなたはウェブサイトにおけるメインビジュアル(別名：キービジュアル/メイン画像)が、直帰率やその後のコンバージョン率(成約率)に大きな影響を及ぼすことをご存知でしょうか？メインビジュアルはお客さまがサイトに訪問した際、最初に目にする要素なので、メインビジュアルの「発言力」や「インパクト」がないとウェブサイトの直帰率(そのページだけ見て離脱してしまう割合)やその後のコンバージョン率に大きく影響してしまいます。 では一体、どのようにすれば「発言力」や「インパクト」を持ったメインビジュアルを作ることができるのでしょうか？それは「キービジュアルの基本原則と基本レイアウト」を知ることが重要です。メインビジュアルにどのような役割があるかを理解することで、どのような要素を配置する必要があって、どんなレイアウトを組めばいいのか理解することができるからです。事実、メインビジュアルをリニューアルしただけで直帰

あなたのウェブサイトの郵便番号入力フォームは、入力しても住所が自動入力されず、お客さまにとって使いづらいフォームになってしまっていませんか？ そこで、郵便番号を入力したら住所が自動表示されるギミックを採用することが重要です！フォームのユーザビリティは入力完了率やコンバージョン率に大きく影響するからです。事実、フォームの平均離脱率は60%を超えていると言われ、その理由の多くが「入力が多い・面倒・分かりづらい」です。 より多くの集客に力を入れることも重要ですが、入力フォームを使いやすくし、購買プロセスまで至ったお客様に対して確実にコンバージョンしてもらうことのほうが費用対効果も圧倒的に高いですよね。 そこで今回は、その離脱の原因の一つである「入力が面倒」を未然に防ぐ「たった2行で郵便番号から住所を自動入力する方法」をご紹介します！ そもそも郵便番号から住所を自動表示とは？ 郵便番号から住所を自

あなたはタイポグラフィがウェブサイトの可読性・アクセシビリティ・ユーザビリティ、そしてデザインに大きく影響することをご存知でしょうか？美しく読みやすいウェブサイト制作が理想ですが、それってなかなか難しいですよね。 では一体、どのようにすれば「美しく読みやすいウェブサイト」を作ることができるのでしょうか？それはデザインの基本である「タイポグラフィ」を徹底して学ぶことです。特にお客さまと直接会話することのできないウェブサイトでは、コミュニケーションにすべて「文字」が用いられ、基本的にどんな場面でも文字は登場するので、見た目にも大きく影響するからです。事実Web Design is 95% Typographyという記事によると「ウェブデザインの95%はタイポグラフィ」とも言われるほどです。 ですから元々印刷物に対して使われていたタイポグラフィですが、我々ウェブデザイナーもしっかりとその基本原則

あなたはただパソコン用のウェブサイトをシングルカラムの縦並びにしただけのレスポンシブデザインを取り入れ、機能性やユーザビリティの低いスマートフォン最適化をしてしまっていませんか？スマートフォン用サイトは、パソコン用サイトとは異なるレイアウト設計やコンテンツ設計が必要となるので、ただ縦並びにしただけでは集客に弱く、また機能性やユーザビリティの低いウェブサイトになってしまいます。 では一体、どのようにすれば「集客に強くユーザビリティや機能性が高いレスポンシブウェブサイト」が実装できるのでしょうか？それは「スマートフォンでの表示にこだわったギミック」を知ることが重要です。ギミックとは仕掛けという意味で、レスポンシブデザインならではのギミックを活用することで本質的なデザインを追求することができるからです。 事実、綿密に設計されたレスポンシブウェブサイトは、ある一定のパターンのギミックが用いられてい

2015.07.13 保存版！ランディングページ最適化(LPO)で効果を最大化する全手順と12のチェック項目 ツイート シェアする 共有する はてブ Pocket あなたはランディングページを依頼・制作する際に、通常のウェブサイトと同様の事業戦略やデザイン設計をしてしまい、せっかく訪問してくれたお客さまを逃していませんか？せっかくリスティング広告を出すのであれば、収益を最大化するランディングページを仕上げたいですよね。 では一体、どのようにすれば「収益を最大化するランディングページ」になるのでしょうか？それは「ランディングページ最適化(LPO)」を実施することです。ランディングページ最適化(LPO)を実施することで、競合他社にはない成功要因や課題を導き出すことができ、またページの離脱を最小限に抑えることができるようになるからです。 つまり収益を最大化するためには依頼側のウェブ担当者がしっか

あなたはフラットデザインのトーンを崩すことなく立体感を表現できる「ロングシャドウ」を簡単に作る方法をご存知でしょうか？最近はWebサイトに限らず、アプリでもフラットデザインが良く使われており、ロングシャドウを見る機会も増えてきたのではないでしょうか。 ところがロングシャドウは作るのに意外と時間がかかってしまうんですよね。それが原因でロングシャドウを少し遠ざけてしまっている方もいらっしゃるのではないでしょうか。しかし実は、1クリックでロングシャドウを作る方法があるんです！それがPhotoshopの「LongShadowGenerator」というプラグインです。 この「LongShadowGenerator」というプラグインを利用することによって、効率よく綺麗なロングシャドウを作ることが出来ます！今回は、そのロングシャドウを1クリックで生成する「LongShadowGenerator」の使い方

あなたはどういった形でWebデザインを学んでいますか？Webデザインに関する本を読んだり、好きなブログを読んだり、セミナー等に参加したり…。そうやって学ぶことはとても楽しいですよね！新しい知識や技術を得ることで、自分のWebデザインに活かすことができ、それがまた達成感に繋がることもありますよね。 そしてもう一つ、Webデザインはゲーム感覚で学ぶこともできます。ゲーム感覚で学ぶことで、思わずそのゲームにハマってしまい、気づけばその技術が鍛えられていた！なんてことも。今回はそんな勉強熱心なあなたに、「思わずハマってしまう、Webデザインの勉強になるゲームやクイズ」をご紹介します！ フォント系 フォント検定 表示されている日本語のフォントを4つの選択肢の中から当てるクイズです。1つの問題につき10秒の制限時間がある「ランキングモード」と、時間無制限の「トレーニングモード」の2種類からチャレンジす

2015.02.23 超簡単！カレンダーから日付入力する方法：jQuery ui Datepicker ツイート シェアする 共有する はてブ Pocket あなたのサイトの入力フォームは、日付入力が難しくなっていませんか？希望発送日時や納品日など日付に関する入力は意外と手間がかかるので、入力しやすいよう改善しましょう！フォームのユーザビリティ(使い勝手)は入力完了率やコンバージョン率に大きく影響からです。 ではどうすれば日付入力が簡単になるのでしょうか？答えは「カレンダー」を使用して日付入力をしてもらうのです。普段から見慣れているカレンダーを使用することで、直感的に日付を確認することができ、また1クリックするだけで選択出来ます。今回は「jQuery ui Datepicker」を使用して、カレンダーを簡単に実装する方法をご紹介します！ ▼サンプルページ jQuery-ui-datepic

現代において企業やお店のマーケティングに必要不可欠なFacebookページ。 前回はFacebookページとは？企業が活用するメリットとデメリットでその必要性やメリット・デメリットをご紹介しました。記事をまだ読まれていない方はお時間があればぜひご覧になってみてください。ビジネスでFacebookページを活用する際にその仕組みやメリット・デメリットを知っておくことは非常に大切なことだからです。 今回はそのFacebookページの作り方をご紹介します！作り方は非常に簡単で、ページの開設自体はほんの数分で完了します。そして開設後に必要な設定を併せてご紹介します。きちんと設定することでより効果的にビジネスに活用することが出来ます。 では早速、Facebookページを作ってみましょう！ Facebookページを開設しよう まずはFacebookページを開設する大まかな流れです。 Facebookの個

あなたはスマホサイトのコンバージョン(※問い合わせや購入・成約などのこと)数が、パソコンサイトに比べて伸びないことに悩んでいませんか？今や無視することの出来ないスマートフォンユーザーのためにスマホサイトを持ったが、効果が発揮されない…。意外とそのような悩みを抱えている方は多いそうです。 では一体、どのようにすればスマホサイトで多くのコンバージョンを上げることが出来るのでしょうか？それは、既存のお問い合わせフォームや資料請求フォームなどを、入力フォーム最適化によってストレスなく快適に入力出来るフォームにすることが重要です。コンバージョン率アップ！入力フォーム最適化(EFO)14のポイントでご紹介したように、入力フォームのユーザビリティ(使い勝手)はコンバージョン数に大きく影響するためです。 しかし上記の記事だけではまだスマホサイトの入力フォーム最適化は完了しません。スマートフォン特有の操作性

あなたはスマートフォン等のモバイル端末からの閲覧に最適化されたサイト(通称：スマホサイト)を最大限に活かしていますか？グーグルは2015年4月21日以降、スマートフォン等での検索結果において、モバイル端末に最適化されたスマホサイトを、最適化されていないパソコンサイトより優遇的に表示することが決定しました。 そのような変更に至った経緯はやはり、スマートフォン等のモバイル端末からのアクセス流入は大幅な増加傾向にあり、とても無視出来ないほど大きなものとなっているためです。つまりスマホサイトを持っていないと、より多くのアクセスを見込むのが難しくなっている状況です。しかしせっかくスマホサイトを持っていても、それが使いにくかったらユーザーはすぐに離れてしまいます。 では一体、どのようにすればユーザーにストレスをかけることなく閲覧してもらえ、より多くのコンバージョン(※問い合わせや購入・成約などのこと)

あなたはHTML5で登場した新たな要素を活用して、SEOやアクセシビリティの観点からも適切な文書構造でコーディングしていますか？また追加されたフォーム関連の属性やAPIをフルに活用した多機能なウェブサイト制作をしていますか？保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみたでもご紹介した通り、HTML5とCSS3はIE8に対応していないため、実務等では使う機会が少なかった方もいらっしゃると思います。また従来のHTMLを理解していたために新要素や属性だけを覚え、そもそも基本をおさらいしてなかった…なんて方もいらっしゃるかと思います。 しかし現在ではスマートフォンなどのモバイル端末を含め、HTML5とCSS3に対応したモダンブラウザの普及率が高くなってきました。そしてHTML5では新たに追加された要素により、従来のHTMLより明確な文書構造を示すことが出来るようになりました。

あなたのサイトの入力フォームは、お客様にとって使いづらいフォームになっていませんか？フォームはお客様のストレスを最大限に減らし、快適で分かりやすいフォームにしなければなりません。フォームの使いやすさ、つまりユーザビリティは入力完了率やコンバージョン率に大きく影響するからです。 そしてフォームのユーザビリティを上げるには、入力フォーム最適化(EFO)をする必要があります。フォームの最適化をすることでユーザビリティが向上し、コンバージョン率の向上に繋がります。そこで今回は、具体的にどのような入力フォーム最適化をすれば良いのか、改善例を元にご紹介します！ そもそも入力フォーム最適化(EFO)とは？ 入力フォームからのコンバージョン率が低い場合、まずはコンテンツやデザインを見直します。しかし、あなたは入力フォームを見直したことがありますか？コンテンツやデザインの見直しも重要ですが、コンバージョンに

あなたはコンバージョン率やクリック率の高いボタンを作る方法をご存知でしょうか？ディレクターに「コンバージョン率が低い」と言われると「あれ？自分のデザインのせいかな？」なんて思ってしまいますよね。そこからフォームやボタンのデザインを見直すWebデザイナーさんも多いと思います。 ではどうすればコンバージョン率の高いボタンを作ることが出来るのでしょうか？それは「人の心理を理解する」ことです。そうすることであなたもコンバージョン率の高いボタンを作ることが出来ます。 事実、A/Bテストを用いた検証でコンバージョン率を大幅に改善した事例は数多く存在します。今回はその事例と「コンバージョン率の高いボタンを作る方法」を併せてご紹介します！ そもそもコンバージョンボタンとは？ 本題の前に、そもそもコンバージョンボタンとは何のことか再確認してみましょう。コンバージョンボタンとは、Webサイトに訪れたお客様に資

あなたはサイトデザインに悩むことはありますか？またWebデザインを学び始めた方は、多くの書籍を読んで勉強をしても、いざサイトデザインをしようとすると「どんなデザインにしようかな…」と悩んでしまいますよね。私もそうでした。しかしそんな時は、おしゃれなサイトをまとめた「ギャラリーサイト」が非常に参考になります。サイトデザインに悩んだ時だけでなく、デザインやレイアウトを学ぶときにも活用することが出来ます。 そうして多くのサイトを見ることで、自分自身の技術向上にも繋がるのです。しかし重要なのは、「このデザインいいね！」と思ったものを真似することではありません。そのデザインがなぜそのようになったのか、デザイナーの思い描いている「設計」を洞察することが重要です。 これを繰り返すことで「自分の引き出し」が増え、オリジナルのデザインに活かすことが出来ます。実際にそうやって多くの技術を得たデザイナーは数多く

2014.12.03 超簡単！フォームをリアルタイムで入力チェックする：jQuery-Validation-Engine ツイート シェアする 共有する はてブ Pocket あなたのサイトの入力フォームは、リアルタイムで入力チェックが出来るようになっていますか？リアルタイムチェックを導入していないせいで、入力完了率を下げてお客様を逃していませんか？ リアルタイムチェックをまだ導入されていない場合は、「jQuery Validation Engine」を導入しましょう！「jQuery Validation Engine」はお客様の入力をリアルタイムでチェックしてくれるので、入力エラーを事前に防ぎ、それが入力完了率やコンバージョン率の向上に繋がります。「入力完了率なんてそんなに低くないでしょ」と思われるかもしれませんが、驚くことにフォームの入力完了率は業界別に見るフォーム入力完了率データがす

あなたは”視認性とクリック率の高いバナーの作り方”をご存知でしょうか？バナーはただデザインが良いだけでは意味がありません。視認性が高く潜在顧客が「おっ！自分に関係がありそう！」と思ってくれるデザインやレイアウト、そしてキャッチコピーが必要なのです。 でも”視認性とクリック率の高いバナー”を作るのって難しそうですよね…。Webデザイナーなら誰しも経験あると思いますが、多くの時間を掛けたにも関わらず理想のバナーにならないことも。しかし”視認性とクリック率の高いバナーの作り方”にはその基本があります。基本を抑えることで理想のバナーを効率よく制作出来るようになります。もちろん、何度も練習を重ねることが大切なのですが、基本を知っているのと知らないのでは大きな差があります。 そこで今回は、高品質なバナーの作り方をまとめてみましたので、ぜひご覧ください！ そもそもバナーの役割とは？ 本題に入る前に、そも

主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの