週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけた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 ボタン,フォーム,アイコン,リボンのジェネレーターをセットで提供

今週の気になるWebネタ

買収を急がせた「LTE」「テザリング」「iPhone 5」 ソフトバンク,イー・アクセス買収の狙い - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1210/01/news133.html

ソフトバンクが,⁠イー・モバイル」ブランドでおなじみイー・アクセスを買収しました。イー・アクセスが持っている1.7GHz帯のLTEネットワークを使って,iPhone 5がよりつながりやすくなるんだとか。もちろん,それが実現するまでには,ちょっと待たないといけないようです。

iPhone 5ユーザーにとってはうれしい話ですが,イー・モバイルのLTEのWiFiルーターを使っていた人たちには,少々複雑なようです。同じ回線にソフトバンクのiPhone 5ユーザーがドカッとやってくるわけなので,つながりにくくなったり遅くなったりしないかと心配するわけですね。

ちなみにわたしはソフトバンクだけどiPhoneは4のままだし,イー・モバイルのWiFiルーターも持ってるんですが,古いもので基本的には使っていません。2段階制の料金プランで維持費が安いので,いざという時のために持っているんです。先日ドコモのWiFiルーターが調子悪くなるという「いざという時」が来て,そのときには重宝しました。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入