週刊Webテク通信

2011年6月第4週号1位は、デザインの原則をWebデザインの実例とともに解説、気になるネタは、あなたがつくるデジタルAKB48「AKB48推し面メーカー」

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

1. A Graphic Design Primer, Part 2: The Principles of Design - Noupe Design Bloghttp://www.noupe.com/design/a-graphic-design-primer-part-2-the-principles-of-design.html/

デザインの原則について、豊富なWebデザインの実例とともに解説した記事です。

  • バランス
  • 比率
  • 優先順位
  • 対比
  • リズムと流れ
  • 調和とまとまり

といった項目について、説明とサンプルが紹介されています。

図1 Webデザインのサンプルとともにデザインの原則をレクチャー
図1 Webデザインのサンプルとともにデザインの原則をレクチャー

2. 50 Beautifully Designed Single Page Websites ≪ Artatm - Creative Art Magazinehttp://artatm.com/2011/06/50-beautifully-designed-single-page-websites//

単ページ完結のWebサイトのショーケースです。ただ1ページだけをスクロールで見せるページもあれば、非同期の読み込みを使って豊富なコンテンツを表示するページもあります。

シンプルながらもアイデアが光るページも多く、いろいろと参考になります。

図2 単ページ完結Webサイトのショーケース
図2 単ページ完結Webサイトのショーケース

3. 20 Awesome Examples of Retro And Vintage HTML5 Websiteshttp://smashingwall.com/inspiration/retro-and-vintage-html5-websites//

レトロ&ビンテージデザインのHTML5サイトを多数紹介しています。

レトロ感のあるデザインとHTML5&CSS3の使用は、どちらも海外でのWebデザインの流行のようです。

図3 レトロ&ビンテージデザインのHTML5サイトのショーケース
図3 レトロ&ビンテージデザインのHTML5サイトのショーケース

4. 80+ Excellent Examples of Creative Contact And Web Form Designs | Inspiration | instantShifthttp://www.instantshift.com/2011/06/20/80-excellent-examples-of-creative-contact-and-web-form-designs//

フォームデザインのショーケースです。Twitter、Facebook、MobileMeなど有名サイトのログイン画面やコンタクトフォームなどを集めています。

図4 フォームデザインのショーケース
図4 フォームデザインのショーケース

5. Redesigning a Site For Mobile: What's Involved?http://www.elated.com/articles/redesigning-a-site-for-mobile-whats-involved//

既存のサイトをモバイル向け(スマートフォン向け)にリ・デザインする方法を解説した記事です。

具体的なコーディングなど技術的な解説はありませんし、あっさりした内容です。

コンテンツを取捨選択し、モバイル向けに必要なものだけを掲載するのが大切としています。

図5 サイトをモバイル向けにデザインし直す方法
図5 サイトをモバイル向けにデザインし直す方法

そのほか、先週の記事の中から、特に興味深かったものを3つ紹介します。

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

FileStork - Request files from anyone using Dropboxhttps://filestork.net/

前回につづきDropbox関連のWebサービスです。FileStorkを使うと、Dropboxを利用して人からデータを受け取ることができるようになります。

FileStorkにDropboxへのアクセス許可をした後、相手のメールアドレスやファイルを保存するフォルダなどの設定をして「リクエスト」を作成します。その際に受け取りを許可するファイル形式やパスワードを指定することもできます。

「リクエスト」を作成すると相手にメールが送られます。受け取った相手はメールの「Upload」のリンクからアップロード用のページに移動し、ファイルをアップロードします。

1つのリクエストは1回限りのやりとりが前提のようで、ファイルをアップロード完了した後、再度アップロード用ページに行こうとしても「not found」になります。ファイルを受け取る側が先にアクションを起こすファイル転送サービスといったところでしょうか。

なお、Dropboxユーザー同士なら、共有フォルダを設定すると常にファイルのやりとりができるようになります。また、⁠パブリックリンク」⁠共有リンク」を使って、自分のDropbox上のファイルを人にダウンロードしてもらうことも可能です。Dropbox便利ですね。

図6 誰からでもDropboxでファイルを受け取れるサービス
図6 誰からでもDropboxでファイルを受け取れるサービス

おすすめ記事

記事・ニュース一覧