週刊Webテク通信

2013年9月第3週号1位は、新テクノロジー Generator が Photoshop CC に!、気になるネタは、ドコモ版iPhoneは発売当初「@docomo.ne.jp」メールに非対応。10月1日から対応となるも、プッシュ通知には2014年1月まで非対応

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

1. 新テクノロジー Generator が Photoshop CC に!http://blogs.adobe.com/tnakao/generator-for-photoshop-cc-14-1

Photohsop CCに搭載されたAdobe Generatorという画期的な新テクノロジーを解説した記事です。

レイヤー名に「◯◯.png」などと名前をつけるだけで、画像が自動生成されます。

従来のスライスしてWeb用画像を書き出すという作業が自動化されるわけです。もちろん透過PNGに対応していますし、レイヤーグループを1つの画像にすることも可能です。

ファイル名にパラメーターを設定することで、いろいろな書き出し方ができます。⁠.png8」で8bitのPNG、⁠.jpg10」で画質100%のJPEG、⁠200%」と頭に付けると200%サイズの画像(Retina用)などの記述方法が説明してあります。

Photoshopのレイヤーから自動で画像を切り出すには、Slicyのようなサードパーティのツールもあります。Slicyの方が優れているという声もありますが、追加費用もなくPhotoshopだけで作業が完結するということで、すばらしい機能強化だと思います。

図1 Photoshop CCのGeneratorテクノロジーの解説
図1 Photoshop CCのGeneratorテクノロジーの解説

2. hr要素のデザインサンプル 12 | NxWorldhttp://www.nxworld.net/tips/hr-css-design.html

hr要素をCSSで装飾した作例を多数紹介しています。

一部画像を使っているものもありますが、ほとんどの例はCSSだけでデザインしています。

:after擬似要素を用いて記号や文字を追加する方法は、いろいろ応用できそうです。アイコンフォントのWebフォントを使ってもいいですね。

図2 hr要素のデザインサンプルを12点
図2 hr要素のデザインサンプルを12点

3. 15 Best Websites with Non-Standard Navigation - Designmodohttp://designmodo.com/non-standard-navigation-websites/

変わったナビゲーションのWebサイトを多数紹介しています。

スクロールで見ていくシングルページのものが多いですが、シングルページでも項目の変わり目毎にページ遷移している(ブラウザの「戻る」⁠進む」で移動できる)など、ユーザビリティに配慮するのが最近の傾向のようです。

図3 変わったナビゲーションのWebサイトいろいろ
図3 変わったナビゲーションのWebサイトいろいろ

4. 34 Creative Examples of Icons in Web Design - Bloom Web Designhttp://bloomwebdesign.net/2013/09/25-inspiring-examples-of-icons-in-web-design/

アイコンが使われたWebデザインのギャラリーです。

Webフォントとして使えるアイコンも最近増えてきましたし、アイコンを効果的に使ったWebサイトは今後も増えそうです。

図4 アイコンが使われたWebデザインのギャラリー
図4 アイコンが使われたWebデザインのギャラリー

5. Flat Websites Design | Website Designing | Design Bloghttp://blog.karachicorner.com/2013/09/flat-ui-design-websites/

フラットなUIデザインを使ったサイトのギャラリーです。

ポートフォリオサイトが多いのは、トレンドに合わせてリニューアルしやすいからでしょう。

図5 フラットなUIデザインのサイトのギャラリー
図5 フラットなUIデザインのサイトのギャラリー

そのほか、最近の記事の中から、気になる記事を紹介します。

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

Free vectors icons for download and Icon font | Flaticonhttp://www.flaticon.com/

フリーのベクターアイコンを入手できるサービスです。Webフォント、SVG、PNGでダウンロードできます。

現在32カテゴリーで9000個近くのアイコンが登録されています。カテゴリ別に探したり、フリーワードで検索することができます。

必要なアイコンを選択していき、あとでまとめてダウンロードすることができます。その際にWebフォントにもできるのが便利ですね。Webフォントは、一緒に生成されるHTMLとCSSを指定の仕方の参考にできるようになっています。

トップページの下には、ボタンやメニューなどでの指定例のHTMLとCSSが掲載されていて、こちらも参考になります。

図6 フリーのベクターアイコンを入手できるサービス
図6 フリーのベクターアイコンを入手できるサービス

おすすめ記事

記事・ニュース一覧