週刊Webテク通信

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

Webテク, Webデザイン, Web広告, Generator, Photoshop, CSS, iPhone, ドコモ

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

ネットで見かけた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　フリーのベクターアイコンを入手できるサービス

今週の気になるWebネタ

ドコモ版iPhoneは発売当初「@docomo.ne.jp」のメールに非対応。10月1日から対応となるも，プッシュ通知には2014年1月まで非対応。 ? すまほん!!http://smhn.info/201309-docomo-iphone-5s-5c-email-docomo-spmode-mail

ついにNTTドコモからiPhoneが発売されるわけですが，キャリアメールに関しては準備が整っているわけではないようです。

@docomo.ne.jpのメールアドレスが使えるspモードメールは，9月20日の発売日から11日後の10月1日からの提供。独自アプリではなく，iPhone標準のメールアプリを使うようです。

クラウドベースの「ドコモメール」が12月上旬から対応し，メールのプッシュ（着信通知）対応は2014年の1月中旬からの予定になっていますが，本当にこのスケジュール通りに対応できるのかどうか気になるところです。また，国際標準規格のMMSに対応するという報道もあります。

スマートフォンでは，従来のキャリアメールの役目はLINEなどのメッセージアプリに置き換え，メールはGmailやiCloudメールなどを使えばいいと思うのですが，キャリアメールが必要という人がまだまだ多いようです。SMSとMMSとiMessageの違いについて理解している人も少ないと思いますし，なかなかややこしくて難しいiPhoneでの「メール」の扱いです。

Webテク, Webデザイン, Web広告, Generator, Photoshop, CSS, iPhone, ドコモ

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote