Webデザイナーが知っておきたい美しく表現力のあるタイポグラフィの基本原則
あなたはタイポグラフィがウェブサイトの可読性・アクセシビリティ・ユーザビリティ、そしてデザインに大きく影響することをご存知でしょうか？美しく読みやすいウェブサイト制作が理想ですが、それってなかなか難しいですよね。 では一体、どのようにすれば「美しく読みやすいウェブサイト」を作ることができるのでしょうか？それはデザインの基本である「タイポグラフィ」を徹底して学ぶことです。特にお客さまと直接会話することのできないウェブサイトでは、コミュニケーションにすべて「文字」が用いられ、基本的にどんな場面でも文字は登場するので、見た目にも大きく影響するからです。事実Web Design is 95% Typographyという記事によると「ウェブデザインの95%はタイポグラフィ」とも言われるほどです。 ですから元々印刷物に対して使われていたタイポグラフィですが、我々ウェブデザイナーもしっかりとその基本原則
保存版！ページビュー数や直帰率に効果的なグローバルナビゲーションの作り方
あなたはグローバルナビゲーション(別名：グロナビ)がページビュー数や直帰率に大きく影響することをご存知ですか？ウェブデザイナーであれば、しっかり時間をかけてグロナビを設計をし、それぞれのウェブサイトに効果的なレイアウト・デザインをしなければなりません。 では一体、どのようにすれば「ページビュー数や直帰率に効果的なグローバルナビゲーション」が作れるのでしょうか？それは「使いやすく分かりやすいグロナビとは何か」を知ることが重要です。誰でも使いやすく、スムーズにコンテンツ間を遷移できるグロナビは必然的にページビュー数や直帰率に良い影響を及ぼすからです。 例えばこちらの記事にもあるように、あるECサイトのグロナビを改善しただけで売上が56%も向上した事実もあります。そこで今回は「ページビュー数や直帰率に効果的なグローバルナビゲーションの作り方」をご紹介します！ そもそもグローバルナビゲーションとは
保存版！HTML5で改めてやっておきたいことやフォーム最適化をまとめてみた
あなたはHTML5で登場した新たな要素を活用して、SEOやアクセシビリティの観点からも適切な文書構造でコーディングしていますか？また追加されたフォーム関連の属性やAPIをフルに活用した多機能なウェブサイト制作をしていますか？保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみたでもご紹介した通り、HTML5とCSS3はIE8に対応していないため、実務等では使う機会が少なかった方もいらっしゃると思います。また従来のHTMLを理解していたために新要素や属性だけを覚え、そもそも基本をおさらいしてなかった…なんて方もいらっしゃるかと思います。 しかし現在ではスマートフォンなどのモバイル端末を含め、HTML5とCSS3に対応したモダンブラウザの普及率が高くなってきました。そしてHTML5では新たに追加された要素により、従来のHTMLより明確な文書構造を示すことが出来るようになりました。
コンバージョン率アップ！入力フォーム最適化(EFO)14のポイント
あなたのサイトの入力フォームは、お客様にとって使いづらいフォームになっていませんか？フォームはお客様のストレスを最大限に減らし、快適で分かりやすいフォームにしなければなりません。フォームの使いやすさ、つまりユーザビリティは入力完了率やコンバージョン率に大きく影響するからです。 そしてフォームのユーザビリティを上げるには、入力フォーム最適化(EFO)をする必要があります。フォームの最適化をすることでユーザビリティが向上し、コンバージョン率の向上に繋がります。そこで今回は、具体的にどのような入力フォーム最適化をすれば良いのか、改善例を元にご紹介します！ そもそも入力フォーム最適化(EFO)とは？ 入力フォームからのコンバージョン率が低い場合、まずはコンテンツやデザインを見直します。しかし、あなたは入力フォームを見直したことがありますか？コンテンツやデザインの見直しも重要ですが、コンバージョンに
Webデザイナーが知っておきたいコンバージョン率の高いボタンを作る方法
あなたはコンバージョン率やクリック率の高いボタンを作る方法をご存知でしょうか？ディレクターに「コンバージョン率が低い」と言われると「あれ？自分のデザインのせいかな？」なんて思ってしまいますよね。そこからフォームやボタンのデザインを見直すWebデザイナーさんも多いと思います。 ではどうすればコンバージョン率の高いボタンを作ることが出来るのでしょうか？それは「人の心理を理解する」ことです。そうすることであなたもコンバージョン率の高いボタンを作ることが出来ます。 事実、A/Bテストを用いた検証でコンバージョン率を大幅に改善した事例は数多く存在します。今回はその事例と「コンバージョン率の高いボタンを作る方法」を併せてご紹介します！ そもそもコンバージョンボタンとは？ 本題の前に、そもそもコンバージョンボタンとは何のことか再確認してみましょう。コンバージョンボタンとは、Webサイトに訪れたお客様に資
Webデザイナーが知っておきたい高品質なバナーの作り方をまとめてみた
あなたは”視認性とクリック率の高いバナーの作り方”をご存知でしょうか？バナーはただデザインが良いだけでは意味がありません。視認性が高く潜在顧客が「おっ！自分に関係がありそう！」と思ってくれるデザインやレイアウト、そしてキャッチコピーが必要なのです。 でも”視認性とクリック率の高いバナー”を作るのって難しそうですよね…。Webデザイナーなら誰しも経験あると思いますが、多くの時間を掛けたにも関わらず理想のバナーにならないことも。しかし”視認性とクリック率の高いバナーの作り方”にはその基本があります。基本を抑えることで理想のバナーを効率よく制作出来るようになります。もちろん、何度も練習を重ねることが大切なのですが、基本を知っているのと知らないのでは大きな差があります。 そこで今回は、高品質なバナーの作り方をまとめてみましたので、ぜひご覧ください！ そもそもバナーの役割とは？ 本題に入る前に、そも
保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた
主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
