週刊Webテク通信

2013年9月第5週号1位は、大きなサイズの画像やタイポグラフィを使ったWebデザインのテクニック、気になるネタは、iPhone等で電子マネーの残高・利用履歴を確認できるPaSoRi(パソリ)

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

1. Designing Big: Tips for Using Oversized Layouts - Designmodohttp://designmodo.com/designing-big-layouts/

大きなサイズの画像やタイポグラフィを使った、Webデザインのテクニックについて解説した記事です。

最近のトレンドのひとつである、従来に比べてかなり大きな要素を利用したWebデザインの、メリットや制作時に気をつけることなどがまとめられています。

  • 強力なイメージ画像に焦点をしぼる
  • 大きな文字中心にレイアウトする
  • 一般的なナビゲーションを利用する
  • 色をうまく使う
  • 大きな要素のほかに、もう一つウリを作る
  • シンプルであり続ける
図1 大きなサイズの画像やタイポグラフィを使ったWebデザイン
図1 大きなサイズの画像やタイポグラフィを使ったWebデザイン

2. Write HTML & CSS Faster with Emmethttp://www.hongkiat.com/blog/html-css-faster-emmet/

Emmetを使って、HTMLとCSSを高速に記述する方法を紹介しています。

ZenCordingという名前の方がなじみのある人が多いかもしれませんが、ZenCordingは現在アップグレードしてEmmetとなっています。

HTMLやCSSのコードを短縮して記述したあとキー操作で展開することができ、コーディングの時間短縮につながるものです。Adobe DreamweaverやCoda、Sublime Textなどにプラグインとして追加して使います。

図2 Emmetを使ってHTMLとCSSを高速に記述する方法
図2 Emmetを使ってHTMLとCSSを高速に記述する方法

3. One Page Responsive Website Designs | Website Designing | Design Bloghttp://blog.karachicorner.com/2013/09/one-page-responsive-website-designs/

レスポンシブな単ページ完結のWebデザインのギャラリーです。

解説付きで大量のサイトが紹介されています。

図3 レスポンシブなシングルページのギャラリー
図3 レスポンシブなシングルページのギャラリー

4. Best Free jQuery Form Plugins to Improve User Experience - Treehouse Bloghttp://blog.teamtreehouse.com/best-free-jquery-form-plugins-to-improve-user-experience

ユーザー体験を向上させる、フォーム向けのjQueryプラグインを多数紹介しています。フォームの機能を強化するものや、見栄えを良くするものなどが掲載されていました。

また、フォームがらみの話題として、サインアップフォームの有料テンプレートが紹介された、Best CSS3 Sign-Up Form Source Files - Premium Resource | Dzinepressという記事もありました。

図4 フォーム関連のjQueryプラグインいろいろ
図4 フォーム関連のjQueryプラグインいろいろ

5. 20 Website Designs That Feature Cool Illustrations | iBrandStudiohttp://ibrandstudio.com/inspiration/website-designs-illustrations

素晴らしいイラストが使われたWebデザインのギャラリーです。

文字以外のグラフィック要素がすべてイラストといった感じのサイトを集めています。

図5 イラストが使われたWebデザインのギャラリー
図5 イラストが使われたWebデザインのギャラリー

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

先週の気になるWebサービスLine.do - An easy-to-use and free timeline toolhttp://line.do/

Lineは、年表を簡単に作れるWebサービスです。日付と出来事、関連する写真または動画・音声を追加していくだけで、簡単に見栄えの良い年表をつくることができます。

年表の表示は、縦タイプと横タイプを見る人が切り替えられるようになっています。

縦タイプではFacebookのタイムライン風に表示され、縦にスクロールして見ていきます。

横タイプの場合は、1つの出来事が1画面に表示されるようになり、日付をクリックすると自動で横方向にスライドします。

なお、日付を入れる欄があるのですが、ここに日付を入れてもソートされませんでした。どうやら、あえてただのテキスト欄にしているようで、好きなフォーマットで日付を表記できますし、年だけ入れるのか月や日まで入れるのかなど、自分のルールで運用できます。日本語も入力できました。

簡単に見栄えの良い年表が作れるので、会社の歴史や自分の経歴などに利用できそうです。アーティストのディスコグラフィや作品ギャラリーとしても使えそうですね。

図6 簡単に見栄えの良い年表を作れるWebサービス
図6 簡単に見栄えの良い年表を作れるWebサービス
図7 作った年表のサンプル
図7 作った年表のサンプル

おすすめ記事

記事・ニュース一覧