【Web制作】カテゴリの記事

InDesignのアドバンテージを考えてみました。

  • 印刷用のデータを作成できる(これがホームポジション)
  • Illustrator、Photoshop、PDFなど、手元の素材系ファイルをバシバシ貼れる(これはKeynoteも同様)
  • 自動カーニング、合成フォント、文字組みアキ量設定(句読点の後のアキ、括弧類、和欧間の調整)などを使って美しい文字組版を実現できる

長文/複数ページに必要となる目次、索引、相互参照、脚注などは、Wordとバッティングするし、マスターページを使って同じ体裁のページを量産していく様は、PowerPoint/Keynote的な側面もある。一方、段落スタイル/文字スタイル、先頭文字スタイル/正規表現スタイル、セルスタイル/表スタイル、オブジェクトスタイルなどを使ってシステマチックに組み上げていくのは、Webページみたい。こうしてみると、いろいろな顔があっておもしろい。

表にまとめてみました。

WebWordPowerPointKeynoteIllustratorInDesign
拡張子.html.docx.pptx.key.ai.indd
カラーモードRGBRGBRGBRGBRGB/CMYKRGB/CMYK
マスター
ページ
マスター

なし
*1


*2
ありありなしあり
入れ子 可能
自動ページ番号-
組版自動カーニング
合成フォント
句読点の
後のアキ
括弧類
和欧間の調整
複数ページ目次
索引
相互参照
脚注
画像の
配置
リンク/埋め込みリンクリンク、
埋め込み
埋め込みリンク、
埋め込み
基本はリンク
(埋め込みも可能)
Illustrator
(.ai)
*3
GIF/JPEG/PNGに変換
またはSVGに変換
Photoshop
(.psd)
GIF/JPEG/PNGに変換する
PDF
インライン(img)
独立
書き出しPDF*4
PDF/X
インタラクティブ
PDF
EPUB*5
電子書籍(DPS)
プレゼン
テーション
アニメーション
トランジション
スライドショー

ソシムから『マルチデバイス時代のWebデザインガイドブック』が発売されました。著者は、鍋坂 理恵(サン・サン)、大月 茂樹(ニイハチヨンサン)のお二人。

マルチデバイス対応のサイトに必要な知識やUIパターン、HTMLプロタイピング(デザイン・イン・ブラウザー)、レスポンシブWebデザインなどについて解説した書籍です。

もう少し平たくいうと、スマートフォン、タブレットなどに対応したサイト制作を行う上で知っておきたい画面設計のトレンドや制作手法について解説した書籍です。ガッツリ制作されない方も、おさえておきたい内容だと思います。

2013年11月21日(木)19:00-20:00、アップルストア銀座で開催されたCSS Nite in Ginza, Vol.72「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」のスライド資料です。

_DSC7108.jpg

2010年にリリースされたIllustrator CS5でのWeb向けの機能強化以降、Web向けにIllustratorを使う上では、次のアプローチが基本とされてきました。

  • ドキュメントプロファイルに「Web」を選択し、[新規オブジェクトをピクセルグリッドに整合]にチェックを付ける
  • [ピクセルプレビュー]をオンにする

先週末に行われたdot-ai, Vol.2において、黒葛原 道さん(eater)が、次のアプローチを発表され、「なるほど!」と思ったのでご紹介します。

  • [新規オブジェクトをピクセルグリッドに整合]はオフにする
  • グリッドを1ピクセルに設定し、[グリッドにスナップ]をオンにする
  • [線の位置]は外側に設定する

次の図は、左が従来のもの。右側が黒葛原さん方式です。

Illustratorの「ピクセルグリッドに整合」は、3px x 3px、線幅1pxの図形を描画する際、ピクセルグリッドの中央に吸着します。これを「ピクセルグリッドに整合」を使わずに、ピクセルグリッドに正確に吸着すればいいじゃん、ということですね。

aicc-pixelgrid-32.jpg

なるほど、このアプローチなら、パスの位置とピクセルグリッドがずれる問題にも対処できます。

Web用にIllustratorを使う、つまり、ピクセルプレビューをオンにする場合、1ピクセルの線幅を持つ四角形を作成する場合、四角形の大きさが小さいと、[線の位置]が「中央」または「内側」だとつぶれてしまいます。

[線の位置]は外側にするのがベターです。

(クリックすると、拡大します)

YouTube

DTP TransitのYouTubeチャンネルです。1分前後のクイックTipsを投稿しています。

チャンネル登録

Twitter

本サイトの記事以外に、小ネタやタイムリーな話題などをツイートしています。

マンスリーでまとめています。

このページの上部に戻る