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

1. How to Stop Designing Square Layouts by Thinking Outside of the Boxhttps://www.sitepoint.com/stop-designing-square-layouts-thinking-outside-box/

四角形で区切るのではなく、もっと柔軟なレイアウトを実装するための実例やサンプルコードをまとめた記事です。

SVGを使った例、ビットマップ画像を使った例、CSSのTransformを使った例、CSSのマスク機能を使った例を紹介しています。

2. Designing User Interfaces for Your Mother - Marvel - Marvelhttps://blog.marvelapp.com/designing-user-interfaces-mother/

ユーザーインターフェイスを、母親にも分かるようにやさしく作るためのヒントを紹介しています。

• 我々とは違うブラウザ（古いブラウザ）でWebを体験している
• Webサイトの機能をほとんど理解していない
• アイコンを理解していない
• パワーユーザーではない
• クリックの回数が多いことを気にしない
• 自分の繋がりの範囲内で自分のしたいことをしたいだけ

以上、母親をターゲットユーザーにした場合に考えられることでした。

3. 5 Ways Creative Web Designers Work on Awesome Websites - Designmodohttp://designmodo.com/creative-web-designers-work/

素晴らしいサイトを作るクリエイティブなWebデザイナーに共通する5つの特性をまとめています。

1. デザインテクニックではなくコンセプトに沿って制作する
2. 頭は雲の中に置きつつ足はしっかり地に着けている
3. 視覚的な一貫性を犠牲にせずにスタイルやトレンドをミックスする
4. 完全に目的を満たすツールを選択する
5. 枠からはみ出して発想すると同時に簡潔にまとめる

4. 30 Acronyms Web Developers Should Know - Hongkiathttp://www.hongkiat.com/blog/web-dev-acronyms/

Web開発者が知っておくべき30の略語をまとめています。CMSとかGUIのような知っていて当然なものもありますが、知らないものも結構ありました。

分からない略語に接したときにその都度検索すればいいのでしょうが、同じ略語が複数の意味を持つケースもあるので、Web関連の用語としてまとまっているこの記事は便利なはずです。

5. In Need of a Better Prototyping Solution? Check Out These 7 Toolshttp://line25.com/articles/need-better-prototyping-solution-check-7-tools

プロトタイプ制作のためのツールを7つ紹介しています。ワイヤーフレーム／モックアップ／プロトタイプの違いや、プロトタイプの作り方についての簡単な解説もありました。

最近プロトタイプ制作ツールに関する記事をよく見かけます。以下の記事も参考になると思います。

• Prototyping Tools: From Quick and Dirty Wireframes to Functional Prototypes - Mockplus
• A Digital Design Workflow: Tools in Review

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

• Googleの著作権侵害対策日本語版が公開 | マイナビニュース
  著作権に対する取り組みをまとめたレポートの日本語版が公開されました
• 絵で見る「iOS 10」日本語環境--知っておきたい新機能と変更点 - CNET Japan
  新機能と変更点をスクリーンショットで紹介しています
• Instagram Upgrades Call to Action Buttons, Adds New Video Ad Tool | Social Media Today
  Instagramの広告でのボタン類が変更されました

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

Colorizehttps://alexbeals.com/projects/colorize/

Colorizeは、キーワードを入力すると、色とその色の16進数カラーコードが表示されるサービスです。たとえば「sky」と入れれば水色っぽい色が、「⁠purple」と入れれば紫色が表示されます。

仕組みとしては、そのキーワードで画像検索した結果の25枚の画像から平均を取っているそうです。なので、日本語でもどんな言語でもOKですし、単語だけでなくフレーズでも検索できます。

抽象的な言葉から連想される色を探すなど、多少の実用性もあると思います。どんな色が出てくるを当てるクイズに使っても楽しいでしょう。意外な色が出てくることも少なくありませんが、なかなか楽しめるサービスです。