CSS Nite公式サイト

2014年7月17日、KDDIウェブコミュニケーションズセミナールームで開催したCPI x CSS Nite x 優クリエイト「After Dark」（12）Web Fonts特集のフォローアップとして、太田良典さん（ビジネス・アーキテクツ）の『Webフォント導入のポイント～実際の導入事例から～』セッションのフォローアップを公開します。

スライド（PDF、67ページ、15.4MB）

参考サイト

事例としてご紹介したサイトです。

NEW CITROËN DS5
http://ds5.citroen.jp/
AOI Pro.
http://www.aoi-pro.com/
BA
http://www.b-architects.com/

補足

Q. BAの会社概要ページでは、ロゴがWebフォントではなくPNGで置かれているようです。どのように使い分けられているのでしょうか?: A. 他の書体のテキストが置いてあっても意味が通じる場合はWebフォントを、そうでない場合には画像を使っています。
Webフォントを使っても、かならずその書体で再現されるとは限りません。Webフォントに対応していない環境もありますし、利用者がサイト側指定のフォントを使用しない設定にしていることもあります。そのような環境では、他の書体で表現されます。
WebフォントでBAのロゴを表現した箇所は、環境によっては、他の書体で単に「BA」と書かれた状態になることもあり得るということです。
BAサイトのヘッダ部分のロゴは、社名が入っている場所ですので、「BA」というテキストに置き換えられても意味は通じます。
BA会社概要 <http://www.b-architects.com/company/about/> の末尾には、PNG画像でロゴを置いています。ここではロゴのビジュアルを紹介していますので、「BA」というテキストに置き換えられると意味が通じなくなってしまいます。そのため、ここではあえてWebフォントではなく、画像を使用しているのです。
Q. お話にあった電子書籍はどこで買えますか?: A. BOOK☆WALKERで先行配信されています。
19日からBOOK☆WALKERで「ファンタジア大賞フェア」というキャンペーンが始まっていまして、キャンペーン対象として配信されています。具体的にはこちらです。
他で買えるようになるのは8月以降で、順次、以下の書店で買えるようになるそうです（配信開始日は書店によって異なります）。
・ニコニコ静画
・紀伊國屋書店kinoppy
・BookLive!
・honto
・eBookJapan
・dマーケットBOOKストア
・Amazon
・Google Play ブックス
・Apple iBOOKS
・kobo(楽天)
・ブックパス
・Sony Reader Store
・Yahoo!ブックストア
・東芝BookPlace
・mibon
・LINE マンガ
・セブンネット
・アニメイトブックストア

AfterDark12-s3 from CSS Nite on Vimeo.

CSS Nite実行委員会

CPI x CSS Nite x 優クリエイト「After Dark」：Web Fonts特集が終了しました

CSS Nite公式サイト

11 years 5ヶ月 ago

2014年7月17日(木)、KDDIウェブコミュニケーションズセミナールームでCPI x CSS Nite x 優クリエイト「After Dark」：Web Fonts特集を開催し、80名弱の方にご参加いただきました。

フォローアップは、近々に公開予定です。

ツイートは下記にまとめました。

CPI x CSS Nite x 優クリエイト「After Dark」（12） Web Fonts特集 - Togetterまとめ

次のブログで取り上げていただきました。ありがとうございます。

Web Fonts特集いってきたよ！ | 30代独身女Webデザイナーの年収と将来に悩むブログ
「CSS Nite After Dark 12 - 今、そこにあるWeb Fonts」に行ってきた - console.blog(self);

CSS Nite実行委員会

CPI x CSS Nite x 優クリエイト「After Dark」（12）フォローアップ：酒井優さん（WEBCRE8.jp）

CSS Nite公式サイト

11 years 5ヶ月 ago

2014年7月17日、KDDIウェブコミュニケーションズセミナールームで開催したCPI x CSS Nite x 優クリエイト「After Dark」（12）Web Fonts特集のフォローアップとして、酒井優さん（WEBCRE8.jp）の『2014年版Webフォントの使用方法とこれまでの歩み』セッションのフォローアップを公開します。

スライド

Webフォントはとりあえず導入するだけなら本当に手軽に利用することができます。アイコンなどの利用もそんなに難しいものではないので、デモを触って実際のコンテンツに組み込んでみたり、CodePenやjsdo.itなどのサービスを用いて自分で用意したフォントを表示させてみることから始めてみてはいかがでしょうか。

WEBCRE8.jpでも、今後Webフォントや文字に関する、特にリガチャをはじめとしたフォントの機能についても記事を書いていきますのでよろしくお願いします！

補足、参照リンク

スライド内で掲示したサイトを紹介します。

WEBCRE8.jp
http://webcre8.jp/
HTML5KARUTA
http://roadstohtml5.com/html5karuta/
HTML5KARUTA Game for Web
http://roadstohtml5.com/html5karuta/game/

参考資料

次期Firefox 3.6が対応する新しいWebフォント形式“WOFF”とは？ - フォントブログ
http://blog.petitboys.com/archives/woff.html
WOFF (Web Open Font Format)の導入 - 血統の森 web実験小屋
http://momdo.s35.xrea.com/web-html-test/CSS3-memo/introducing-woff.html
CSS Fonts Module Level 3 （日本語訳）
http://www.hcn.zaq.ne.jp/_/WEB/css-fonts-ja.html
Can I use... Support tables for HTML5, CSS3, etc
http://caniuse.com/#search=font

AfterDark12-s2 from CSS Nite on Vimeo.

CSS Nite実行委員会

CPI x CSS Nite x 優クリエイト「After Dark」（12）のフォローアップを公開します

CSS Nite公式サイト

11 years 5ヶ月 ago

2014年7月17日、KDDIウェブコミュニケーションズセミナールームで開催したCPI x CSS Nite x 優クリエイト「After Dark」（12）Web Fonts特集のフォローアップを公開します。

フォローアップ：関口浩之さん（ソフトバンク・テクノロジー） | CSS Nite公式サイト
フォローアップ：酒井優さん（WEBCRE8.jp） | CSS Nite公式サイト
フォローアップ：太田良典さん（ビジネス・アーキテクツ） | CSS Nite公式サイト
フォローアップ：阪本さん（モリサワ） | CSS Nite公式サイト

その他

CPI x CSS Nite x 優クリエイト「After Dark」（10）フォローアップ河村さん | CSS Nite公式サイト
Source Han Sans（源の角ゴシック）／Noto Sansがリリースされました - DTP Transit
Web Fontsに関して思っていること（2012年10月） - outtakes
CSS Nite in Ginza, Vol.72フォローアップ『Webデザイナーのためのタイポグラフィと文字組版（Reloaded）』鷹野雅弘 | CSS Nite公式サイト

CSS Nite実行委員会

CPI x CSS Nite x 優クリエイト「After Dark」（12）フォローアップ：関口浩之さん（ソフトバンク・テクノロジー）

CSS Nite公式サイト

11 years 5ヶ月 ago

2014年7月17日、KDDIウェブコミュニケーションズセミナールームで開催したCPI x CSS Nite x 優クリエイト「After Dark」（12）Web Fonts特集のフォローアップとして、関口浩之さん（ソフトバンク・テクノロジー）の『日本語ウェブフォントのいままでとこれから』セッションのフォローアップを公開します。

スライド（PDF、47ページ、5.6MB）

参照リンク

FONTPLUSのツールやTIPSのリンク集をご紹介します。Webフォント導入前の評価でご活用ください。

Webフォントの配信データ容量の確認方法
配信するWebフォントデータサイズとそのフォントのフルセット容量が確認できます。下記は筑紫明朝 Pr6N Rで調べたケースです。任意の文字列を入力して［試し書きを適用］すると、15.252KB／12214.268KB のように表示されます。このケースでは、書体フルセットでは約12MBですが、実際の配信データ容量は約15KBという意味です。使用するブラウザがより配信フォーマットが異なるのでブラウザにより表示容量が変化します。モダンブラウザの多くはWOFF形式で計算します。
FONTPLUSの「プロポーショナルメトリクス」機能の詳細説明
 実装サンプル
FONTPLUSの「余白削除＋letter-spacing」文字詰め機能の詳細説明
 実装サンプル
FONTPLUS TIPSサイト
「Webフォント導入」「文字組み」「書体の種類」のテーマ別に、現在、20以上のTIPS記事をアップしています。
FONTPLUSの試し書き機能（個別書体）
リンク先はロダンNTLG Pro Bで試し書きをする例です。文字サイズ変更（em指定とpt指定）できます。表示品質テストとして複数デバイスで確認することをおすすめします。こちらの試し書きで表示できる任意文字列は1,000文字までになります。
FONTPLUSの試し書き機能（一覧表示）
フォント一覧の検索絞込みした後、[試し書き]ボタンを押してください。任意の文字列（100文字まで）を入力すると、1ページ10書体づつ一覧形式でWebフォント表示します。

より良いプラットフォームを提供するため、皆さまからのご意見、ご要望お待ちしております。ありがとうございました。

宿題

質問「ペアカーニング」について回答します

ペアカーニングに対応出来ますか？: FONTPLUSはペアカーニングに対応しておりません。ペアカーニングに対応していないブラウザがあるからです。フォントプラスのスマートライセンスのプロポーショナルメトリクス機能は実際にプロポーショナルメトリクスの情報をフォントに入れているわけではありません。
情報をフォントに入れたとしても、対応できないブラウザがあるからです。そのため、FONTPLUSではプロポーショナルメトリクスのデータをもとに文字のx軸の最小値と最大値で文字幅を調整することで実現しています。したがって、文字単体の調整となりますので、ペアカーニングのように文字の組み合わせ単位で調整できる機能は現在提供していません。

AfterDark12-s1 from CSS Nite on Vimeo.

CSS Nite実行委員会

CSS Nite LP34のフォローアップを公開しました

CSS Nite公式サイト

11 years 5ヶ月 ago

2014年4月19日、御茶ノ水ソラシティカンファレンスセンターで開催したCSS Nite LP34「Webデザインで使うPhotoshop」のフォローアップを公開します。

（1）黒葛原道さん（eater）『レイヤースタイルを使いたおす！よく目にする、あの表現を作ってみよう』
（2）庄崎大祐さん（Stocker.jp）『試してみた！便利なPhotoshop有料プラグイン』
（3）石嶋未来さん（ザ・マーズナレッジ）『Webだからこそできる、写真やイラストがないときの低コストでデキるデザイン発想方法』
（4）庄崎大祐さん（Stocker.jp）『自分でスクリプトを書いて効率アップ』
（5）牧下浩之さん（Plankton Design）『実案件で活用できるPhotoshopデータ作成ルール』

10月16日(木)に開催するCPI x CSS Nite x 優クリエイト「After Dark」（15）にて、改めて取り上げます。

CSS Nite実行委員会

CSS Nite LP34 フォローアップ（2）庄崎大祐さん（Stocker.jp）『試してみた！便利なPhotoshop有料プラグイン』

CSS Nite公式サイト

11 years 5ヶ月 ago

2014年4月19日、御茶ノ水ソラシティカンファレンスセンターで開催したCSS Nite LP34「Webデザインで使うPhotoshop」のフォローアップとして、庄崎大祐さん（Stocker.jp）の『試してみた！便利なPhotoshop有料プラグイン』セッションのスライドなどをシェアします。

スライド、デモデータ（17.9MB）」「自分でスクリプトを書いて効率アップ」同梱
音声

CSS Nite LP34 でお話しした『試してみた！便利なPhotoshop有料プラグイン』の内容が公開されました。Ps CC 2014 では動かないプラグインも多いのでお気をつけください。 http://t.co/vhiq4uNIMh
— なつき (@Stocker_jp) 2014, 7月 19

メッセージ、補足

Web制作向けのPhotoshopのプラグインは有料無料含めてたくさんありますが、有料のプラグインを購入できない場合でも無料のプラグインやスクリプト、Photoshop CCの新機能を使って同じようなことができる、ということをお話ししました。

快適なWebデザインカンプ制作のために、ぜひWebデザイン用のプラグインや新機能もご活用頂けると幸いです。

講演で紹介したプラグインです。

Zeick: Photoshop SVG Export（$19.99）
http://www.zeick.com/
Export your vector layers from PS to SVG（無料）
http://hackingui.com/design/export-photoshop-layer-to-svg/
IcoMoon（SVGからWeb Fontsへの変換・無料）
http://icomoon.io/
PNG Hat（$39.99）
http://pnghat.madebysource.com/
pngquant（無料）
http://pngquant.org/
CSS Hat（$35）
https://csshat.com/
PNG HatとCSS Hat、他2つのプラグインのセット販売（$89.99）
http://plugin.subtlepatterns.com/#bundles
WebZap（$19）
http://webzap.uiparade.com/
Velositey（無料）
http://dandkagency.com/velositey/

画像アセット機能でSVG書き出しする方法

画像アセット機能を使ってSVG書き出しするためには、Photoshop CCのバージョン14.2以降である必要があります。

ダウンロードデータのZIPファイルを解凍し、中に入っている「generator.json」をFinderでコピーします。
Finderのメニューから［移動＞ホーム］を選択し、先ほどの「generator.json」をペーストします。

Windowsの場合、ユーザーフォルダ（ユーザー名のフォルダ）に「generator.json」をペーストします。

Photoshop CCを起動し（既に起動していた場合は再起動し）、カスタムシェイプのレイヤー名の最後に.svgをつけます。

Photoshopのメニューから［ファイル＞保存］などでPSDを保存したあとで、［ファイル＞生成＞画像アセット］にチェックを入れます。PSDを保存したフォルダーと、同じフォルダーに「assets」というフォルダーができ、その中にSVGが保存されているはずです。

画像アセット機能の詳しい使い方は、以下の記事をご覧ください。
Web制作者必見！Photoshop CCにSlicyのような画像アセット（Generator）機能が追加 | Stocker.jp / diary

CSSをコピー機能の使い方

CSSをコピー機能を使うためには、Creative Cloud版のPhotoshop CS6またはPhotoshop CCである必要があります。

レイヤーパネルで、ドロップシャドウなどのレイヤースタイルがついたシェイプレイヤーなどを選択し、レイヤー名の上で右クリックして「CSSをコピー」を選択します。

Dreamweaverやテキストエディターなどでペーストすると、CSSがペーストされます。

iframe src="//player.vimeo.com/video/92403336" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>

試してみた！便利なPhotoshop有料プラグイン／庄崎大祐（Stocker.jp） from CSS Nite on Vimeo.

CSS Nite実行委員会

CSS Nite in KOFU, Vol.4が終了しました

CSS Nite公式サイト

11 years 5ヶ月 ago

2014年7月12日（土）、山梨県立図書館でCSS Nite in KOFU, Vol.4を開催し、30名ほどの方にご参加いただきました。

ツイートは下記にまとめました。

CSS Nite in KOFU, Vol.4 - Togetterまとめ

CSS Nite実行委員会

CSS Nite LP34 フォローアップ（1）黒葛原道さん（eater）『レイヤースタイルを使いたおす！よく目にする、あの表現を作ってみよう』

CSS Nite公式サイト

11 years 5ヶ月 ago

2014年4月19日、御茶ノ水ソラシティカンファレンスセンターで開催したCSS Nite LP34「Webデザインで使うPhotoshop」のフォローアップとして、黒葛原道さん（eater）の『レイヤースタイルを使いたおす！よく目にする、あの表現を作ってみよう』セッションのスライドなどをシェアします。

スライド、デモデータ（17MB）
音声

メッセージ、補足

みなさま、ご参加ありがとうございます！
ロリポおじさんこと黒葛原道です。「つづらはらとおる」と読みます。

今回レイヤースタイルに絞って話しましたが、デフォルト、プリセットの状態でもなかなか使えると思いませんか？

今回のテーマは「アナログな表現をしよう」でも「漫画的な表現をしよう」でもありません。限られた時間やリソースの中で、いかに作りたい物を作るか、そのための一例としてのレイヤースタイルだと思っていただければありがたいです。他にもブラシやレイヤーマスクなどを併用することで、自分がイメージしたものを自分の手で作る、そのための一つの方法としてぜひ活用してください。

ブラシやマスク、その他それぞれの機能に使ってないものがたくさんあると思います。そういった普段気にしていなかった機能を掘り下げてみるのもおもしろいかもしれませんね！

あらためてレイヤースタイル活用のメリット

修正できる
他のレイヤーにコピーできる
設定が保存できる

以上を踏まえるとただの「塗り」であってもレイヤースタイルを使用することをオススメします。

補足：レイヤースタイルの［線］も含めてレイヤーマスクでぼかし（透過）たい場合

レイヤースタイルで境界線を付けて、レイヤーマスクを使用しぼかすと線も塗りも透過してくれません。それを回避する方法です。
詳しくはサンプルファイル［05-line-blur.psd］をご覧ください。

補足：レイヤーマスクの適用方法

レイヤーマスクの適用方法はいろいろありますが、デモで行ったようにレイヤーパネル下の［レイヤーマスクを追加］ボタンがオススメです。

選択範囲を作ってボタンをクリックすると選択範囲外がマスクされ、［optionキー］（Windowsは［altキー］）を押しながらクリックすると選択範囲内がマスクされます。

<p><a href="http://vimeo.com/92403213">レイヤースタイルを使いたおす！よく目にする、あの表現を作ってみよう／黒葛原 道（eater）</a> from <a href="http://vimeo.com/cssnite">CSS Nite</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

CSS Nite実行委員会

CSS Nite LP34 フォローアップ（3）石嶋未来さん（ザ・マーズナレッジ）『Webだからこそできる、写真やイラストがないときの低コストでデキるデザイン発想方法』

CSS Nite公式サイト

11 years 5ヶ月 ago

2014年4月19日、御茶ノ水ソラシティカンファレンスセンターで開催したCSS Nite LP34「Webデザインで使うPhotoshop」のフォローアップとして、石嶋未来さん（ザ・マーズナレッジ）の『Webだからこそできる、写真やイラストがないときの低コストでデキるデザイン発想方法』セッションのスライドなどをシェアします。

スライド、デモデータ（15.7MB）
音声

メッセージ、補足

難のある画像のごまかし方は覚えられるとPhotoshopでも柔軟なピクセル操作が理解でき、これから作るビジュアルデザインにも活きてくるものだと思います。合成についての本も多くでていますので読んでみると非常に多くの知識を得られます。

発想方法は非常に多くあります。道端のフライヤーを持って帰って蓄積しておきネタ探しのときに漁ってみたり、ギャラリーサイトを見ることでも得られますね。しかし「ただ」見ているだけでは参考になりません。
それこそトレースをするくらいの気持ちで「作ること」を意識してはじめて自分の血肉になります。良いデザインがあれば持ち帰ってトレースしてみましょう。

冒頭のデモの横幅付け足しは「コンテンツに応じて拡大・縮小」の方が使いやすいようです。

塗りつぶしの「コンテンツに応じて」は画像内から参照できそうな箇所をひっぱってくるものですが、「拡大・縮小」の方はピクセル間を保管してくれるので余計な要素が入りにくいのだとか！保護対象を作れるというのも大きいですね。

Adobe Photoshop * コンテンツに応じた拡大・縮小

低コストでデキるデザイン発想方法／石嶋未来（ザ・マーズナレッジ） from CSS Nite on Vimeo.

CSS Nite実行委員会

CSS Nite LP34 フォローアップ（4）庄崎大祐さん（Stocker.jp）『自分でスクリプトを書いて効率アップ』

CSS Nite公式サイト

11 years 5ヶ月 ago

2014年4月19日、御茶ノ水ソラシティカンファレンスセンターで開催したCSS Nite LP34「Webデザインで使うPhotoshop」のフォローアップとして、庄崎大祐さん（Stocker.jp）の『自分でスクリプトを書いて効率アップ』セッションのスライドなどをシェアします。

スライド、デモデータ（17.9MB）
音声

メッセージ、補足

「Photoshop用のスクリプトを書く」というと、とても難しそうなことのように思えるかもしれませんが、JavaScriptの基礎知識とScriptingListenerがあればどうにかなるということをお話ししました。

自動化したい作業がアクション機能では実現できないとき、ぜひScriptingListenerのことを思い出して頂けると幸いです。

なお、ダウンロードデータに含まれるスクリプトは［Photoshopのインストールフォルダー/Presets/Scripts］内にコピーしてお使いください。
なお、「シェイプ作成」と「シェイプサイズ変更」スクリプトについては、以下の記事の最後でソースコードの解説をしています。CSS Nite LP34配布版はブログで配布しているものより改良しているため、ソースコードの一部が異なりますがご了承頂けると幸いです。

PhotoshopでのWeb制作効率を向上させる「JSX」とは | Stocker.jp / diary

「段落テキスト作成」スクリプトは、先に「長方形選択ツール」で選択範囲を作ってから実行してください。選択範囲がない場合、サイズと位置を尋ねるダイアログが表示されます。
「段落テキスト作成-MSPゴシック」は「MS Pゴシック」が、「段落テキスト作成-Osaka」は「Osaka」フォントファミリーがインストールされている環境で動作します。

告知事項

Photoshopを使用したWebデザインやHTML/CSSコーディングについて基礎から教えるスクールを渋谷にて開講しています。次回6月開講予定です。
社会人のためのWebデザインスクール

Webデザイナーやコーダーのための、PHP入門とWordPressカスタマイズ講座は、6月?7月の土曜日に開催します。各5時間x2回のレッスンです。
PHP徹底入門講座
 WordPressカスタマイズ講座

自分でスクリプトを書いて効率アップ／庄崎大祐（Stocker.jp） from CSS Nite on Vimeo.

CSS Nite実行委員会

CSS Nite LP34 フォローアップ（5）牧下浩之さん（Plankton Design）『実案件で活用できるPhotoshopデータ作成ルール』

CSS Nite公式サイト

11 years 5ヶ月 ago

2014年4月19日、ベルサール九段　御茶ノ水ソラシティカンファレンスセンターで開催したCSS Nite LP34「Webデザインで使うPhotoshop」のフォローアップとして、牧下浩之さん（Plankton Design）の『実案件で活用できるPhotoshopデータ作成ルール』セッションのスライドなどをシェアします。

スライド、デモデータ（17.1）
音声

メッセージ、補足

ご参加いただきありがとうございました！
私のセッションでは、デザイナーがPhotoshopデータを作成する際に、注意すべき点や便利な手法についてのお話をさせていただきました。

ルールと言うと難しく考えてしまうかもしれませんが、ルールを定めてそれに沿うことによって、効率もデザインの質もあがります。
ルール化することで、他の制作者や他の案件にも活用できますし、時間が経ってから自身のデータを振り返る際にも有効です。
ぜひ実案件の制作に導入し、役立てていただければと思います。

セッション中に紹介したエクステンション

Pixel Dropr：レイヤーをIllustratorのシンボルのように登録・再配置することができます。
http://pixeldropr.com

Layrs：使用していないレイヤースタイルの削除など、レイヤーのクリーンナップをおこなうことができます。
http://madebyvadim.com/layrs/

Photoshopのデータ整理に便利なエクステンション

Adobe Layer Namer：画像アセットを書き出すためのレイヤー名変更を簡単におこなうことができます。
https://www.adobeexchange.com/store/products/1680

Renamy：複数のレイヤーのリネームを一括でおこなうことができます。
http://www.renamy.com

CSS Hat：標準の「CSSをコピー」ではレイヤースタイルの塗りの色を拾うことはできませんが、CSS Hatであれば可能です。
http://csshat.com

告知

デザイナー同士がプレゼンテーションを行い、ものづくりの発想と思考をシェアするイベント「DePre!」のVol.2を、5月24日（土）に開催いたします。
詳細は後日アップデートしますので、ご興味を持っていただけた方は、ぜひ公式サイトをチェックしてみてください。

DePre!

<p><a href="http://vimeo.com/92517062">実案件で活用できるPhotoshopデータ作成ルール／牧下 浩之（Plankton Design）</a> from <a href="http://vimeo.com/cssnite">CSS Nite</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

CSS Nite実行委員会