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

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

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

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

表にまとめてみました。

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

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

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

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

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

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

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

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

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

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

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

• Web用にIllustratorを使うなら［線の位置］は「外側」にするのが吉 - DTP Transit（CC, CS5.5, CS6, Illustrator, Web制作）

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

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

（クリックすると、拡大します）