週刊Webテク通信

2013年7月第3週号 1位は,レスポンシブWebデザインに関するインフォグラフィックス,気になるネタは,Googleグループに残る「非公開のつもり」のメーリングリスト 公開範囲設定に注意を

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

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

1. 5 Infographics to Know More About Responsive Web Design | Best PSD to HTMLhttp://www.bestpsdtohtml.com/5-infographics-to-know-more-about-responsive-web-design/

レスポンシブWebデザインについての,インフォグラフィックスを5つ紹介しています。

1つ目の,⁠レスポンシブWebデザインの10の基礎的なテクニック」には,以下の項目が紹介されていました。

  1. レイアウトをシンプルに保つ
  2. メディアクエリを使う
  3. ブレイクポイントを決める
  4. レイアウトをフレキシブルに
  5. 画像を制御する
  6. 最大・最小サイズを忘れない
  7. ほとんどのものを相対サイズで扱う
  8. モバイルの時は直線的に配置する
  9. 必須ではないコンテンツは外す
  10. Viewportをチェックする

図1 レスポンシブWebデザインに関するインフォグラフィックス

図1 レスポンシブWebデザインに関するインフォグラフィックス

2. What Should You Know About Flat Design | OmahPSDhttp://omahpsd.com/2013/07/flat-web-design/

フラットデザインとは何かを解説した記事です。

以下の項目に分けて説明しています。

  1. グラデーション,ハイライト,シャドウを使わない,輝きを加えない
  2. 鮮やかな色を使う
  3. タイポグラフィを中心にデザインする
  4. ボックスを多用する
  5. シンプルな形を使う

また,利点として,シンプルで好かれやすいこと,モバイルサイトやレスポンシブサイトとの相性がいいこと,コンテンツに集中されやすいことが挙げられていました。

図2 フラットデザインについての解説

図2 フラットデザインについての解説

3. 10 Online Tools to Create Better Site | Dzinepresshttp://www.dzinepress.com/2013/07/10-online-tools-to-create-better-site/

サイト制作に役立つ,オンラインツールを10個紹介しています。

インスピレーションを得るのに役立ったり,色やフォントを決めるのに便利なツールなど,制作の前段階に利用できるツールが多い印象です。

図3 サイト制作に役立つオンラインツールいろいろ

図3 サイト制作に役立つオンラインツールいろいろ

4. 20 Free Web Browser Templates in PSD Formathttp://designrshub.com/2013/07/free-web-browser-templates-psd.html

ダウンロードできる,Webブラウザの枠のPSD素材のリンク集です。

ブラウザの中にWebページが表示されているイメージ画像を合成して作るのために,役立つ素材が大量に紹介されています。

ブラウザのフォームで使われるUIエレメントが用意されているものや,グリッドが引かれているものもありました。

図4 Webブラウザの画像素材のリンク集

図4 Webブラウザの画像素材のリンク集

5. Web Design Showcase: Heavy Background Textureshttp://line25.com/articles/web-designs-showcase-heavy-background-textures

凝ったテクスチャの背景画像を使ったWebデザインのギャラリーです。

木材,皮革,コンクリート風などのテクスチャが使われています。

図5 テクスチャ画像を背景に使ったWebデザインのギャラリー

図5 テクスチャ画像を背景に使ったWebデザインのギャラリー

そのほか,最近の記事の中から,気になる記事を紹介します。

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

SNS ICON MAKER | STICK ICE WORLD:世界初!?氷でできたWEBサイト:AGF スティックhttp://stick-ice-world.com/maker/

SNS ICON MAKERは,AGFの商品PRのための企画サイトの中にあるサービスで,あなたのアイコン画像を「ヒンヤリICE化」するというものです。

TwitterかFacebookで認証すると,アイコン画像やプロフィール画像を凍ったように加工することができます。また,3Mバイト以下の任意の画像をアップロードしてICE化することも可能です。

なお,このサイトは「氷でできたWEBサイト」というコンセプトで作られており,メイキングムービーでは実際に氷でサイトを作っている様子が紹介されていました。

図6 アイコン画像を凍ったように加工するサービス

図6 アイコン画像を凍ったように加工するサービス

今週の気になるWebネタ

Googleグループに残る「非公開のつもり」のメーリングリスト 公開範囲設定に注意を - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1307/11/news045.html

環境省の機密情報が公開されていた問題がきっかけになり,いろんな情報が思いがけずGoogleグループで公開されていることが話題となっています。ソーシャルメディアコンサルタントの人が,組織的に「はてなブックマーク」を行うよう指示を出したメールの内容が公開されていた,なんてことも明らかになっています。

これに関して,ちゃんと設定を確認しなかったのが悪いというのがIT業界の人の基本的スタンスだと思うんですが,標準状態で公開されているのがおかしいという見方もきっと出ていることでしょう。Facebookもそうですが,アメリカの文化では公開することが標準で,標準状態では非公開という日本の文化とは違っているように思えます。

このGoogleグループ内にひっそりと公開されている,本来公開されちゃいけない情報ってたくさんあるのでしょう。最近話題となったコンビニ店員がアイスの冷蔵ケースに入っていた写真のように,見つけて拡散する第三者がいるからこそ「炎上」するわけなんだなということを改めて感じました。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入