InDesignの「段落スタイル」

前回のエントリーの補足です。「段落スタイル」についてもう少し説明します。
約50秒の動画です。

段落スタイルの「編集」

InDesignではアートボード上のテキストに「段落スタイル」を適用した以降は、配置したテキストのプロパティを直接変更するのでなく、段落スタイルパレット側で(追加の)編集を続けます。
スタイルの編集を行う(動画内ではフォントの変更を行っています)と、ドキュメント内に配置された該当要素全てに即座に変更内容が反映されます。
スタイル「見出し(h2)」を編集すれば、ドキュメント内に複数ある見出しのスタイルは全て変更されます。

これにより、スタイルを適用する作業(=文書の構造化)と、(とりあえず作成・適用した)スタイルを精緻化する/デザインを推敲する作業を分けて行うことができます。

段落スタイルの「継承」

動画内のスタイルの編集作業では、適用しているスタイルとは別に、細かなフォント設定をまとめたものを「親」スタイル(正式名称は「基準」)として用意し、切り替えています。例えば、タイトル(h2)の親スタイルの「(ベタ打ちの)游ゴシック体」を別の親スタイル「(font-feature-settings : “palt”;を想定した)詰め設定の游ゴシック体」に変更することで、プロポーショナル表示に変更しています。

親スタイルを「Meiryo」に変更すればWindows7用表示、「ヒラギノ明朝Pro6N」に変更すればOSX用表示など、閲覧環境ごとの表示も簡単に検証することができます。

もちろん、「親スタイル」を使わず、個々のスタイルの内容を編集しても同じ結果は得られますが、「プロポーショナルの游ゴシック体」「ベタ打ちのNotoSans DemiLight」「欧文をMyriadにしたAxisフォント」など、デバイスフォント表示・Webフォント表示を前提にすると、設定はそれなりに限られるので、あらかじめ用意していた方が効率的です。

最新アプリの日本語環境

残念ながらSketchやAdobe XDは、細かなテキスト処理、特に日本語特有のフォント周りのWeb表現(の再現)をあまり得意としていません。そもそもメニューが日本語化していないアプリ(Sketch)に文句を言うのもアレですが、20世紀末、1990年代の1バイト語圏向けのアプリを使っているような感じです。
ビジュアル重視のWebサイトのデザインならともかく、テキスト要素を重視しようとするとなかなか厳しいものがあります。

Web上の日本語の表現力が着実に向上しているというのに、とても残念なことです。

InDesignのテキストの割り付け

InDesignの画像の割り付け方法に続き、テキストファイルの割り付け方法についても動画を作成してみました。
実際には、テキスト割り付け後に「段落スタイル」を適用するところまでとなります。1分10秒ほどの動画です。

「段落スタイル」は、書体・文字サイズ・行間・詰めなど、組版に関する指定をセットにして保存・適用する機能です。htmlに於けるブロック要素(≒段落)に適用するcssに近いもの、と捉えると理解しやすいと思います。罫線を付与できるところ、padding(段落間のアキ)を設定できるところなどもcssに似ています。

使い込めば使い込むほど、再利用可能な自分専用の「スタイル」が増えていく/洗練されていくので、作業効率アップのためにはとても重要な機能です。

Webデザインとも親和性の高い機能だと思うのですが、SketchやXDには残念ながら(まだ)搭載されていません。

ちなみに、PhotoshopやIllustratorにも同じ名称の似た機能があるのですが、フォントのレンダリングにこだわっているからなのか、挙動がかなり緩慢・不審、はっきり言ってバギーな印象があり、あまり使いやすくありません。

Sketch解説本『Sketch』

DSCN1173

BNN新社から発行された、吉竹 遼 著 『UIデザイナーのためのSketch入門&実践ガイド』を購入して読んでみました。

Sketchは使い込んだことがなく、色々と「気づき(笑)」がありました。
備忘録としてメモしておきます。

  • 概念「ページ」。
    複数種の「アートボード」をまとめたもの。IllustratorやInDesignの「(ページ含めた)ペーストボード(エリア)」の概念に近い。ただし、複数枚持てる。1種類のアートボードを(ページとして)複数枚持つのではなく、複数種のアートボードの「セット」を複数枚持てるというのはいい。
  • 概念「シンボル(とインスタンス)」。
    FireworksやFlashを使っていた時に経験・理解済み。
  • 「シンボルの入れ子」とAtomic Design。
    使いこなしの話。
  • 概念「シンボルの(部分的な)オーバーライド」。
    おぅ、これは便利。
  • 概念「リサイズ」。
    要素の拡大縮小の際の小要素の挙動。マルチデバイス対応には必須なのだろうな。
  • 要素・スタイルのセルフライブラリ化・メンバー間共有。
    CC以降(?)、Adobeも普通にやるようになった。
  • プラグインによる拡張。
    どうやらSketchを利用する上では必須らしい。
    • レイヤー名・シンボル名の置換・管理。
      これは新鮮、これは便利。「キレイなファイル」をみな作りたがっている。
  • 外部サービスによる連携。
    これもSketchが選ばれている理由らしい。

新時代のソフトは新しいですね。

でも、やっぱりSketchも、画像の割り付け方法は「配置+大きさ調整+マスク作成+マスク適用」でした。面倒です。
また、角を引っ張ると、トリミング(クロップ位置・量)はそのままで、写真が歪むのがデフォルトの挙動でした……。

InDesignの画像の割り付け

(以前のエントリー、「InDesignでWebDesign」の続きです)

例えば、InDesignの画像の割り付け作業は、他のAdobeソフトに比べ、とても簡単、かつ効率的です。

チュートリアル(のようなもの)を作成しました。1分47秒の動画です。

「画像の割り付け(+トリミング)」自体はもちろん、Photoshop、Illustratorを使って行うこともできますが、InDesignに比べ、工程はもう少し煩雑です。

Adobe XD(Adobe Experience Design CC)はInDesignに似た割り付け方法ですが、対応ファイルが少ない(例えば、.aiや.psdは割り付け不可)、画像を(外部リンクでなく)内部に持ち、ファイルがそれなりに重くなる、カラープロファイルを管理する機能がない、など、まだまだ荒削りです。

WebデザイナーがInDesignをさわることはまずないと思いますが、SketchやXDを「発見」した方なら、InDesignも一度触ってみることをオススメします。

また、印刷物のデザイナーでも、タイミングを逸すると、InDesignを全く経験しないままキャリアを積むこともあるようです。以前から使っているアプリを惰性でそのまま使い続けていると、作業効率でいつのまにか他者に差を付けられてしまいます。

InDesignの実務での導入をオススメするかはさておき、開発環境に於けるアプリケーションの選択は、常に柔軟に考えたいと思います。


ちなみに、InDesignの画像の割り付け方法は他にもあります。

  • Finderから画像ファイルを(何も配置されていない)アートボードやペーストボードにドラッグ&ドロップで割り付け。
    • クリックで実物大・ノートリミングで割り付け。
    • マウスで範囲を指定し、その範囲内に(縮小して)ノートリミングで割り付け。
  • ⌘+Dまたはメニューバー[ファイル]→[配置…]で割り付け。
    • さらにオプションを指定して割り付け。
      • 例)aiの背景を透明にしてアートワークのみを割り付け。
      • 例)pdfのページを指定して割り付け。
      • 例)psdのレイヤーを指定して割り付け。

「雑」な作業、段取りを考慮した細かな作業、どちらにも対応しています。

メカニカルキーボード

DSCN1168

Amazonで安いメカニカルキーボードを購入しました。しばらく使ってみて、使うのやめました。その時思ったことのメモ。


  • 購入したのはCherry青軸(軽め・クリック音あり)互換の英語配列キーボードです。
  • クリック音の発生と打鍵は連動していませんでした。「う〜ん、これでは意味がない」と感じました。
  • キーを押し込む過程でクリック音が発生し、実際の打鍵はさらにその奥にありました。クリック音を出さずに連打することもできます。
  • やはり無駄にうるさかったです。
  • 修飾キーの大きさは揃っており、(Mac用に使うための)キートップの入れ替えは簡単にできました。
  • (キートップ変更後の)キーアサインの変更は「キーボード環境設定」からできましたが、どうも左右の修飾キーを独立したキーとして認識していないように感じます。カスタマイズソフトはきちんと導入したほうがよいと思いました(未検証)。
  • 購入したのはテンキーレスモデルですが、テンキーはあったほうがいい、と改めて思いました。
  • 独立したカーソルキーや、「home」「end」「page up」「page down」「del」「ins」などはついているモデルでした。コンパクトモデルを選ぶとしても、これらのキーはゆずれない、と感じました。
  • 「(Backspaceでなく)delete」はあったほうが何かと便利です。「page up/down」もけっこう使います。
  • キーボードが厚いと、けっこう手首が疲れます。あるいは、天板を低めにする必要があります。
  • 薄型の、Apple純正の有線キーボードが自分にはあっているようです。

またしても無駄な買い物でしたが、何かの経験値が少しアップしたのでよしとします。

nextbit Robinの4K動画

昨年末に購入したnextbit Robinですが、4K動画が撮影できることに気づきました。
テスト撮影をしてみました。

解像については申し分ありませんが、小型センサーということもあり、発色・階調はそれなりな印象です。

カメラアプリ「FiLMiC Pro(Ver 5.5.3)」を使って撮影しました。100Mbpsの4K@24fpsの動画を撮ることができます。ピント・明るさはオートですが、色温度はマニュアルで固定して撮影しています。

撮影された動画はコントラストの高い(※)ものでした。編集の際にシャドウ部を明るくするなどの補正を行っています。また、いくつかのカットでは傾きや構図の調整を行っています。手持ち撮影のカットについては、ソフトウェアによるスタビライズをかけました。

スマホ画面をタッチしての動画撮影はさほど使い勝手のよいものではありませんでした。RobinはmicroSDなどの外部メディアに対応しておらず、内蔵メモリの空き容量だけでは長時間撮影はできません。また、三脚に据えて「カメラ」として使っている間はスマホとして使えません。

ジンバル式スタビライザーなどと組み合わせないと、あえて使用する意味はなさそうです。

iOS版の次期バージョンではLog/Flat撮影をサポートするそうです。

nextbit Robin

DSCN1156

2016年末にnextbit Robinを購入しました。今はこれを使っています。

中華スマホは性能がよくても/質感が高くてもどうしてもiPhoneのパチもん、劣化コピーに見えてしまいます。

デザインの良いAndroid機が欲しいと考えていたところ、並行輸入品がAmazonで2万5000円ほどで売っていたのでつい購入してしまいました。

  • 角を丸めない直方体の基本形状。
  • 金属削り出しではなく、プラスチック製のボディ。
  • 無彩色でなく、原色でもない渋目のカラーリング(ダークグレーに近い紺色です)。

など、ことごとくAppleの逆張りをしています。それでいて

  • 左右対称形・上下も対称形。
  • カメラ部・操作部などはフラット。音量ボタンもごくわずかに膨らんでいるだけ。

など、Appleがやりそうなアプローチを(外観が似ない限りは)積極的に採用しています。

1990年代のZiba Designのプロダクトのようにも見えます。SONYのXperiaにも少し似ているかもしれません。でも防水ではありません。上下についたスピーカーにラーメンのおつゆがはねないよう、上品に使う必要があります。

ADBコマンドでDensityを変更しました。rootは取れませんでしたが、6.0なのでフォントはNoto Sans(レギュラーのみ)です。前機種が5.5インチだったのでやや小さく(5.2インチ)なり、片手での操作もだいぶラクになりました。