週刊Webテク通信

2016年8月第2週号1位は、レスポンシブなヘッダとロゴの扱い方、気になるネタは、月額980円で読み放題 日本版「Kindle Unlimited」提供スタート

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

1.Responsive Headers & Logos – Tips and Pitfalls - Hongkiathttp://www.hongkiat.com/blog/responsive-headers-logo-tips-pitfalls/

レスポンシブWebデザインにおいての、ヘッダとロゴ部分の扱いのテクニックと気をつける点を紹介した記事です。

デスクトップサイズからモバイルサイズに変わったときのヘッダ部分の変化について、以下の項目に分けて解説しています。

  1. ナビゲーションバーが細くなる
  2. ロゴがアイコン化される
  3. フルスクリーンの背景の取り扱い
  4. ナビゲーションが簡素化される
図1 レスポンシブなヘッダとロゴの扱い方
図1 レスポンシブなヘッダとロゴの扱い方

2.5 Self-Education Practices for Web Designers - Speckyboy Design Magazinehttps://speckyboy.com/2016/08/04/5-self-education-practices-web-designers/

Webデザイナーのための、独学でデザイン技術をみがく方法をまとめています。

  1. 日々気になったデザインを保存しておく
  2. 専門家の評価を聞く
  3. 「365日チャレンジ」を行う
  4. ソーシャルメディアに投稿する
  5. 人のデザインを評価する

「365日チャレンジ」は、何かしらのテーマを持って毎日デザインを発表するもので、海外のデザイナーが「毎日ポスターをデザイン」みたいなことをやっているのをよく見かけます。

図2 独学でデザインの技術をみがく方法
図2 独学でデザインの技術をみがく方法

3.5 Things to Do Before You Start Your Next Design File in Sketch, or, Preparing Your Design “mise en… — UX Power Tools — Mediumhttps://medium.com/ux-power-tools/5-things-to-do-before-you-start-your-next-design-file-in-sketch-or-preparing-your-design-mise-en-ff7ea9fe3722#.42vxnqcl1

Sketchでデザイン用のファイルを作成する前にするべき、デザインの下ごしらえについて解説した記事です。

  1. タイポグラフィとテキストスタイルのガイドを作成する
  2. 色とオブジェクトスタイルを設定する
  3. ページとアートボードを作る
  4. グリッドシステムとレイアウトを設定する
  5. ロゴなどの素材を取り込みシンボル化する

デザインツールとしてSketchを使うことを前提とした記事ですが、考え方は別のツールを使う場合でも取り入れられるはずです。

図3 Sketchでのデザインの下ごしらえについて
図3 Sketchでのデザインの下ごしらえについて

4.Balsamiq + Sketch + CanvasFlip + Slack = Awesome design project - CanvasFlip Blogshttps://canvasflip.com/blog/index.php/2016/08/01/balsamiq-sketch-canvasflip-slack-awesome-design-project/

Webデザインの各段階でのおすすめツールを紹介しています。

  1. ペンと紙でスケッチ
  2. Balsamiqでのモックアップ作成
  3. Sketchでのインターフェイスのビジュアル作成
  4. CanvasFlipでのプロトタイプ作成
  5. Slackでチーム間のメッセージのやり取りをする
図4 Webデザインの各段階でのおすすめのツールを紹介
図4 Webデザインの各段階でのおすすめのツールを紹介

5.50 Free UI Kits, Templates, Icons, Mockups & Fonts for Web Designers for August 2016https://speckyboy.com/2016/08/03/50-free-resources-web-designers-august-2016/

Webデザインに役立つフォント、UIキット、フレームワーク、アイコンなどをまとめています。

モックアップのテンプレートやPhotoshopのブラシなどもあります。

図5 Webデザインに役立つ素材いろいろ
図5 Webデザインに役立つ素材いろいろ

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

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

Social Media Sharing Buttons. No JavaScript. No tracking. Super fast and easy.http://sharingbuttons.io/

各種ソーシャルメディア用のシェアボタンを生成するサービスです。JavaScriptを使っていないので読み込みが速いところをウリにしています。

Facebook、Twitter、Google+などからソーシャルメディアを選び、サイズとアイコンを設定できます。アイコンだけのボタンにすることも可能です。

このサービス上でURLとページタイトルを入力してコードを生成するのですが、CMSなどのテンプレートに使うこともできそうです。シェア数の表示などの機能はありませんが、シンプルで軽いというメリットは魅力的です。

図6 各種ソーシャルメディア用のシェアボタン生成サービス
図6 各種ソーシャルメディア用のシェアボタン生成サービス

おすすめ記事

記事・ニュース一覧