週刊Webテク通信

2014年5月第5週号1位は、オンラインビジネスを成功させるためのCTA(コールトゥアクション)ついて、気になるネタは、合い言葉は「Marco!」「Polo」 呼びかけると迷子のiPhoneが返事をする!

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

1. Calls To Action: How To Really Make Money With Your Websitehttp://www.business2community.com/online-marketing/calls-action-really-make-money-website-0883341

オンラインビジネスを成功させる鍵である、WebサイトのCalls To Action(CTA、コールトゥアクション=行動喚起)についてまとめた記事です。

たとえば、訪問者をユーザーへと変えるための以下のようなアクションがあります。

  • ファイルをダウンロード
  • メーリングリストに参加
  • カート/ウィッシュリストに追加
  • ソーシャルメディアでのシェア

これらのアクションを誘導するための、ボタンやテキストリンクがCTAということですね。

以下の要素がポイントとなってくるようで、どんどんテストを繰り返さなければならないとのことでした。

  1. 配置
  2. メッセージ
  3. 説得力のある要素
図1 オンラインビジネスを成功させるためのCTAについて
図1 オンラインビジネスを成功させるためのCTAについて

2. 10 Ways to Create an Effective Website Design Brief | SpyreStudioshttp://spyrestudios.com/10-ways-create-effective-website-design-brief/

効果的なWebデザインを作る10の方法を紹介しています。

  1. Webサイトの問題に対してクライアントと会話をする
  2. クライアントの製品や会社を定義する
  3. クライアントのターゲットとする市場を定義する
  4. Webサイトの機能についてクライアントの目標を把握する
  5. あなたのポートフォリオに対する意見を聞くことを恐れない
  6. クライアントの好き嫌いを把握する
  7. ビジュアルやインスピレーションについて尋ねる
  8. デザインを始める前にコンテンツについて話し合う
  9. CMSを使う
  10. プロジェクト成功を測定する方法を決める
図2 効果的なWebデザインを作る10の方法
図2 効果的なWebデザインを作る10の方法

3. How I designed a website without Photoshop ? Web Design ? Mediumhttps://medium.com/web-design/53e4fdd4457

Photoshopを使わずにWebデザインする方法を解説した記事です。

フレームワークにTwitter Bootstrapを使い、HTMLとSassを使ってサイトをリデザインした作業を振り返り、ワークフローの各所で使ったツールなどを説明しています。

図3 Photoshopを使わずにWebデザインする方法
図3 Photoshopを使わずにWebデザインする方法

4. One page web design has never looked so good!http://desgr.com/one-page-web-design-inspiration/

シングルページ完結型のWebサイトのギャラリーです。

縦にスクロールしていくタイプのものが主流ですが、横にスクロールするものや、縦に展開するけど1ページ単位で切り替えるタイプのものなどもありました。

図4 シングルページ完結型のWebサイトのギャラリー
図4 シングルページ完結型のWebサイトのギャラリー

5. 25 Creative Typography In Web Design | Best Online Resources for Designershttp://www.webdesignersblog.net/design/creative-typography-web-design/

Webデザインに使われるクリエティブなタイポグラフィの事例をまとめた記事です。

凝った書体もあればそうでないものもあり、画像として扱っているものもあればWebフォントもあり、といった感じでした。

図5 クリエティブなタイポグラフィのWebデザインいろいろ
図5 クリエティブなタイポグラフィのWebデザインいろいろ

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

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

Best Validating Tools For Testing Your Website on Mobile Devices | SmashingApps.comhttp://www.smashingapps.com/2014/05/21/best-validating-tools-for-testing-your-website-on-mobile-devices.html

モバイル端末でのWebページの見え方をチェックするWebサービスをまとめた記事を紹介します。

紹介されているものを全部見てみたのですが、iPhone 5が含まれていないなど古いものが多いと感じました。この中では、以下で紹介する2つがおすすめだと思います。

Responsinatorは、複数デバイスの画面が一度に表示されるのが便利です。フラットデザインの端末のイメージの中にサイトが表示され、もちろんスクロールしたり画面遷移したりできます。

Handset Emulators/Phone Emulatorは、モニタサイズを指定することで、画面上にモバイル端末を原寸表示することにこだわっているのが特徴です。こちらは1デバイスごとに見ていくタイプです。

図6 モバイル端末でのWebページの表示チェックツールいろいろ
図6 モバイル端末でのWebページの表示チェックツールいろいろ

おすすめ記事

記事・ニュース一覧