週刊Webテク通信

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

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

ネットで見かけた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 各種ソーシャルメディア用のシェアボタン生成サービス

今週の気になるWebネタ

月額980円で読み放題 日本版「Kindle Unlimited」提供スタート - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1608/03/news048.html

ついに日本でも定額読み放題の「Kindle Unlimited」が始まりました。月額980円で和書12万冊以上,洋書120万冊以上のKindle版書籍,雑誌,コミックなどが読み放題となります。

1ヵ月の無料お試しができるのですが,そのままだと無料期間終了とともに自動で有料プランに移行されるので注意が必要です。同じパターンでAmazonプライムをお試し後に有料プランになってしまった人も多いと思います。

それなりに児童文学もあったので,ムスメに何冊か選ばせて,わたしの古いKindle Paperwhiteに入れてお出かけの時に使わせてみました。お出かけの時にはだいたい本を1冊持たせるのですが,Kindel端末なら軽いし何冊でも入るので子供に持たせるのにも便利ですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入