週刊Webテク通信

2014年5月第4週号 1位は，ブラウザ上でのWebデザインに必須のツール，気になるネタは，大画面スマホでも端まで指が届く親指形スタイラス

Webテク, Webデザイン, Web広告, CSS, 文章校正, スマートフォン

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

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

1. 6 must have design in browser toolshttp://smashinghub.com/6-must-have-design-in-browser-tools.htm

ブラウザ上でのWebデザイン（design in browser）に必須のツールをまとめた記事です。

Photoshopなどでのレイアウト作業を行わずに，いきなりブラウザ上で動くプロトタイプを作成していく，いわゆる「design in browser」に役立つツールを6つ紹介しています。

  1. Chrome Inspector
    Chromeのデベロッパーツール
  2. Sip
    画面上の色を拾うアプリケーション
  3. LiveReload
    CSSファイルなどの変更をブラウザに即適用するツール
  4. Brackets
    Adobeがオープンソースで提供するコードエディタ。Edge Codeはその派生版
  5. Yeoman
    Webアプリ開発のためのパッケージ管理ソフト
  6. Purecss
    Yahooが提供するCSSフレームワーク

図1　ブラウザ上でのWebデザインに必須のツール6選

図1　ブラウザ上でのWebデザインに必須のツール6選

2. 21 free tools for perfecting your portfolio | Webdesigner Depothttp://www.webdesignerdepot.com/2014/05/21-free-tools-for-perfecting-your-portfolio/

ポートフォリオサイトに役立つツールを多数紹介しています。

作品の写真を見せるためのギャラリー系ツールがほとんどです。

ギャラリー系ツールとしては，「⁠25+ Best Responsive jQuery Slider Carousel Plugins」というスライダー／カルーセルのjQueryプラグインをまとめた記事もありました。

図2　ポートフォリオサイトに役立つツールいろいろ

図2　ポートフォリオサイトに役立つツールいろいろ

3. Designing Dark Websites Properly - Tips And Inspirationhttp://www.designyourway.net/blog/inspiration/designing-dark-websites-properly-tips-and-inspiration/

黒色ベースのWebデザインを行うためのテクニックと，参考例となるギャラリーをまとめています。

黒色や濃いグレーを背景にした場合，文字が読みにくくなる可能性が高まりますが，ページ上で最も重要な情報に注目を集めやすいという良さもあるとのことです。

そのためには，ホワイトスペースを十分に使い，文字を大きく読みやすくすることが大事だと説明してありました。

図3　黒色ベースのWebデザインを行うためのテクニックと参考例

図3　黒色ベースのWebデザインを行うためのテクニックと参考例

4. 38 Free Open Source CSS Dropdown Navigation Menus | SpyreStudioshttp://spyrestudios.com/38-open-source-css-dropdown-menus/

コード共有サイトから，CSSによるドロップダウンメニューを多数紹介しています。CSSのみではなく，多くのケースではJavaScriptも使われているようです。

Codepen，CSSDeckに投稿されているものからまとめられています。

図4　ドロップダウンメニューを多数紹介

図4　ドロップダウンメニューを多数紹介

5. javascript - Is it possible to apply CSS to half of a character? - Stack Overflowhttps://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character

1つの文字の半分ずつに別の色を付けるCSSテクニックが紹介されています。そういうことができないかという問いに対し，多くの人がいろいろなコーディング例を投稿しています。

このStack Overflowというサイトは，プログラマー向けのQ＆Aサイトなんですね。

図5　CSSで1つの文字の半分ずつに別の色を付ける方法

図5　CSSで1つの文字の半分ずつに別の色を付ける方法

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

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

文章校正など，ブログ記事作成に役立つ無料ツール9選http://liskul.com/proofreading_tool9-2209

今回は，「⁠文章校正など，ブログ記事作成に役立つ無料ツール9選」という記事を紹介します。

  • 日本語のタイプミス，変換ミス，誤字脱字をチェックするツール
  • 言葉の間違いや不適切な表現を校正してくれるツール
  • 小学1年から高校3年＋大学レベルの13段階で，日本語のテキストの難易度を推定するツール

といった文章の校正に役立つツールをはじめ，以下のようなWeb関連やSEOに役立つものも掲載されていました。

  • コピーコンテンツをチェックするツール
  • 文章中のキーワードの出現頻度を解析するSEOに役立つツール
  • Webページ内の外部リンクの一覧を抽出するツール

図6　文章校正など，ブログ記事作成に役立つ無料ツール9選

図6　文章校正など，ブログ記事作成に役立つ無料ツール9選

今週の気になるWebネタ

サンコー，大画面スマホでも端まで指が届く親指形スタイラス - PC Watchhttp://pc.watch.impress.co.jp/docs/news/20140512_647842.html

大画面スマホのために，指サック型のスタイラスが登場しました。その名も「親指形スタイラス 指のび～る」です。発想はいいと思うのですが，指の形をしているためジョークグッズに思えてしまいます。

iPhoneも大画面モデルが出るという噂があるので，この親指スタイラスのニーズは高まるかもしれません。アップルが何かしら大画面での片手操作対策をしてくれることも期待したいです。アップルがデザインした「指のび～る」も見てみたいですね。

Webサイトを作る側として考えると，モバイルページの操作系の要素は，なるべく下に持って来た方がいいのでしょう。左上にロゴがあってホームに戻るというのは定番ですが，スマホ片手持ちでは一番指が届きにくいのが左上なので，その常識も考え直す必要があるのかもしれません。

Webテク, Webデザイン, Web広告, CSS, 文章校正, スマートフォン

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote