週刊Webテク通信

2012年10月第2週号1位は、成功するランディングページを作るための基本事項、気になるネタは、ソフトバンクがイー・アクセスを買収

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2012年10月1日~2012年10月7日の間に見つけた記事のベスト5です。

1. Framework for a Successful Landing Pagehttp://smashinghub.com/framework-for-a-successful-landing-page.htm

成功するランディングページを作るための、基本的な事柄について解説した記事です。

タイトルに「Framework」とあるので、テンプレート的なフレームワークを紹介しているのかと思ったのですが、そうではなく「基本、基礎」といった意味で使われているようです。

以下の項目でランディングページを作る上でのポイントが解説されています。

  • 1つのアイテムに焦点を当てる
  • シンプルな表現をする
  • 信頼関係を作る
  • 行動を起こさせる
  • レイアウトとデザイン
  • 配置
  • テストを行い決めていく

また、ランディングページの実例もいくつか紹介されています。日本のランディングページに比べて、かなりシンプルですね。

図1 成功するランディングページを作るための基本事項
図1 成功するランディングページを作るための基本事項

2. Media Queries Tutorial - Convert Burnstudio into a Responsive Websitehttp://www.1stwebdesigner.com/css/media-queries-tutorial-convert-burnstudio-responsive-website/

CSSのメディアクエリーの使い方についてのチュートリアル記事です。既存のPC向けサイトをレスポンシブWebデザインに変更していく過程を解説しています。

メニューや見出しの文字を画像化せずにテキストのまま使っていたので、簡単にレスポンシブ化できたという面もありますよね。

図2 メディアクエリーの使い方
図2 メディアクエリーの使い方

3. PCデザインの新しいカタチ「タッチジェスチャー」を意識したUIデザインのまとめ | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイトhttp://webdesignmatome.com/webdesign/touch-gestures

タッチして操作するときにも使いやすい、クリッカブルなブロックが並んだサイトのギャラリーです。タッチジェスチャーへの対応をどのくらい意識しているのかは分かりませんが、この手のサイトはたしかに増えていますね。

ロールオーバーでフォーカスが当てられるようになっているサイトが多く、タッチデバイスでなくても使いやすいインターフェイスなので、今後も流行りそうです。

図3 タッチ操作に向いたUIデザインのサイトギャラリー
図3 タッチ操作に向いたUIデザインのサイトギャラリー

4. 20 Examples of Timeline in Web Designhttp://medleyweb.com/inspiration/20-examples-timeline-web-design/

Webデザインで使われる年表の作例集です。Facebookのタイムラインのように、時間軸に合わせてコンテンツを配置したデザインの、いろいろな作例を見ることができます。

ちなみに「Timeline」には、年表のほかにスケジュール表、時刻表という意味もありました。

図4 年表デザインのギャラリー
図4 年表デザインのギャラリー

5. 35 Useful Responsive HTML and CSS Templateshttp://smashinghub.com/35-useful-responsive-html-and-css-templates.htm

レスポンシブWebデザインのテンプレートを各種紹介しています。カスタマイズがやりやすそうなシンプルなものもいくつかあります。

画面サイズの変化によって、インターフェイス部分をどう変化させるかの参考にもなりますね。

図5 レスポンシブなHTMLとCSSのテンプレートいろいろ
図5 レスポンシブなHTMLとCSSのテンプレートいろいろ

そのほか、最近の記事の中から、気になるニュースを紹介します。

先週の気になるWebサービス

Ui Parade - Live Toolshttp://livetools.uiparade.com/index.html

Ui Paradeは、ボタン、フォーム、アイコン、リボンの4つのジェネレーターを提供しているサービスです。アイコンビルダーはドットを打って画像を作るものですが、ほかの3つはCSSを生成するためのものです。

どれもシンプルで必要最小限の設定項目しかありませんが、インターフェイスが洗練されていて操作性もいいのが特徴です。

ボタンはグラデーションを使った角丸ボタンが作成でき、ロールオーバー時とボタンダウン時の設定もできます。

フォームは、テキストフィールドと送信ボタンの形状や色などを設定できます。

リボンは、バリエーションはないですが、よく見かけるリボン風の形状をCSSだけで実現できます。

図6 ボタン、フォーム、アイコン、リボンのジェネレーターをセットで提供
図6 ボタン、フォーム、アイコン、リボンのジェネレーターをセットで提供

おすすめ記事

記事・ニュース一覧