はてなブックマーク

あなたはフラットデザインのトーンを崩すことなく立体感を表現できる「ロングシャドウ」を簡単に作る方法をご存知でしょうか？最近は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」は、ウェブページの