週刊Webテク通信

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

ネットで見かけた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選

おすすめ記事

記事・ニュース一覧