週刊Webテク通信

2016年9月第4週号 1位は,四角形で区切らずもっと柔軟なレイアウトを実現する例いろいろ,気になるネタは,GmailとInbox,レスポンシブデザインメールに対応

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

ネットで見かけた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のマスク機能を使った例を紹介しています。

図1 四角形で区切らずもっと柔軟なレイアウトを実現する例いろいろ

図1 四角形で区切らずもっと柔軟なレイアウトを実現する例いろいろ

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

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

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

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

図2 ユーザーインターフェイスを母親にも分かるように作るヒント

図2 ユーザーインターフェイスを母親にも分かるように作るヒント

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

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

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

図3 クリエイティブなWebデザイナーに共通する5つの特性

図3 クリエイティブなWebデザイナーに共通する5つの特性

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

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

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

図4 Web開発者が知っておくべき30の略語

図4 Web開発者が知っておくべき30の略語

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

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

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

図5 プロトタイプ制作ツール7選

図5 プロトタイプ制作ツール7選

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

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

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

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

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

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

図6 キーワードを元に関連する色を表示するサービス

図6 キーワードを元に関連する色を表示するサービス

今週の気になるWebネタ

GmailとInbox,レスポンシブデザインメールに対応 〜PC/スマホに合わせて文字サイズやレイアウトを最適化して表示 - PC Watchhttp://pc.watch.impress.co.jp/docs/news/1020273.html

ついに,GmailがCSSのメディアクエリに対応するとのことで,レスポンシブなHTMLメールが実用的になります。9月下旬の対応予定で,Web版もモバイルアプリ版も対応するようです。

レスポンシブなHTMLメールを作る場合,CSSのサポートもまちまちなPC用メールクライアント用にテーブルレイアウトで組んで,CSSでモバイル用にレイアウトを調整するというアプローチがよく使われます。ところが,Gmailがメディアクエリに対応していなかったため,モバイルでGmailのユーザーを考慮するとこのテクニックも不完全だったのです。

今回のGmailのメディアクエリ対応で,2段組や3段組レイアウトのHTMLメールが,気兼ねなく作れるようになるでしょう。レスポンシブHTMLメール元年が来るぞというビッグなニュースなんですが,日本ではそれほど話題になっていませんね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入