週刊Webテク通信

2015年8月第1週号 1位は,Webデザインをブラウザ上で始めなくてはいけない理由,気になるネタは,8から10へ無償アップグレード:「Windows 10」とコラボ! デイリーチコの名物アイスが“夢の10段”に無償アップグレード

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

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

1. Prototyping: Why You Should Start Designing Websites in the Browserhttp://www.velir.com/blog/index.php/2015/07/30/prototyping-why-you-should-start-designing-websites-in-the-browser/

Webのデザインは,ブラウザ上で動くプロトタイプを作ることから始めるべきだと主張している記事です。Photoshopでデザインするのではなく,最初からHTML&CSSで組んでいこうという考え方ですね。

プロトタイプをデザインする流れとして以下の手順が紹介されています。

  • スケッチ
  • グレイのボックスを使ったプロトタイプ
  • スタイルタイル
  • デザインのプロトタイプ

まず,グレイのボックスを使った枠組みだけのプロトタイプをHTML&CSSで作り,スタイルタイルでビジュアル要素を決めてから,デザイン要素を含んだプロトタイプを作るという流れです。

スタイルタイルは配色やフォント,UIエレメントなどのデザイン見本用テンプレートのことで,2015年4月第4週号で紹介しました。

図1 ブラウザ上でWebデザインを始めなくてはいけない理由

図1 ブラウザ上でWebデザインを始めなくてはいけない理由

2. Material Design is Different, Not Better — Android & Tech News — Mediumhttps://medium.com/android-news/material-design-is-different-not-better-87909af6ffe1

マテリアルデザインが必ずしも良いとは限らない点について,解説した記事です。

  • iOSとの類似性
  • マテリアルデザインではコンテンツが王様ではない
  • タブバー vs ハンバーガーメニュー
  • 色の使用
  • プラットホームに固有のもの vs 全てのプラットホームで同じもの
  • マテリアルデザインは細かく定義されている
  • どのようなときにマテリアルデザインが有効なのか

図2 マテリアルデザインが必ずしも良いとは限らない点

図2 マテリアルデザインが必ずしも良いとは限らない点

3. 4 ways Windows 10 will impact web design | Webdesigner Depothttp://www.webdesignerdepot.com/2015/07/4-ways-windows-10-will-impact-web-design/

Windows 10がWebデザインに与える影響についてまとめています。

  1. 新たなデバイスに容易に対応する
  2. 会話型音声認識アシスタントCortanaが検索に革命を起こす
  3. 開発者のマーケットを切り開く
  4. 継続的にアップデートする

図3 Windows 10がWebデザインに与える影響4点

図3 Windows 10がWebデザインに与える影響4点

4. 25 Free Code Snippets for Navigation Menus - Web Resources Depothttp://webresourcesdepot.com/25-code-snippets-for-nav-menus/

ナビゲーションメニューを作るコード例を多数紹介しています。

codepenで共有されているコードにリンクしているので,実際に動作を確認したりコードを変更して検証したりできます。

図4 ナビゲーションメニューのコードいろいろ

図4 ナビゲーションメニューのコードいろいろ

5. Advanced CSS filters - Vincent De Oliveirahttp://iamvdo.me/en/blog/advanced-css-filters

CSSによる画像のフィルター効果について,いくつかの使用例をまとめた記事です。

Safari 9でしか動かないという事例ばかりなのですが,可能性が感じられて興味深いです。

図5 CSSフィルターの使用例

図5 CSSフィルターの使用例

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

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

Background Image Generator - SiteOriginhttp://bg.siteorigin.com/

Background Image Generatorは,背景画像を作るWebサービスです。選べるパターンが豊富なところが特徴です。

背景色とパターンを選べるほか,ブレンドモードやパターンの強さも設定できるようになっています。また,ノイズを加えたりパターンを反転することも可能です。

作った背景画像は,繰り返しパターンのPNGファイルとしてダウンロードできます。2倍サイズの画像も保存できますが,ベースのパターンがビットマップのようで,単に拡大してぼやけた画像となっていました。

図6 背景画像のジェネレーター

図6 背景画像のジェネレーター

今週の気になるWebネタ

8から10へ無償アップグレード:「Windows 10」とコラボ! デイリーチコの名物アイスが“夢の10段”に無償アップグレード - ITmedia PC USERhttp://www.itmedia.co.jp/pcuser/articles/1507/29/news140.html

Windows 10と中野ブロードウェイのデイリーチコがコラボ企画をやるというのが,意外な組み合わせで驚きました。

Windowsは8(8.1)から9を飛ばして10への無償アップグレードということで,デイリーチコ名物の8段ソフトクリームが同じ値段で10段になるというのは,よくできた企画ですね。

Web制作に関わる人には,Windows 10ではデフォルトブラウザがEdgeになったというのが注目ポイントだと思いますが,デイリーチコとのコラボというエッジの効いた企画をやるマイクロソフトの懐の深さにも注目したいと感じました。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入