週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 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デザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

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

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

コメント

コメントの記入