はじめに...

LCARSを描くときに Adobe Illustrator や Photoshop などのプロ用の高価なソフトなんて必要ありません。最低限レイヤー機能がサポートされていれば、フリーのたとえば「Hyper-Paint」や「Pixia」など自分の使い易く手に馴染んだグラフィックソフトを1本用意しましょう。

基本用語

この講座で説明の為に使用する用語です。 お断りしておきますが、これは私が勝手に名付けたもので、決して正式な呼び方ではありません。

まずは、LCARS グラフィックの特徴とも言えるこれ。 これを LCARS 角丸（かどまる） と呼びます。 これらを組み合わせた LCARS グラフィックの基礎となる部分を LCARS 枠（LCARS わく）と呼びます。

LCARS 枠の終端にあるこのグラフィックの事を、キャップと呼びます。 由来は文字横に被せるようにするのと野球帽（キャップ）みたいだからです。

ボタン類の呼び方は、右図の上から順に標準両角丸ボタン（ひょうじゅん・りょうかどまる・ぼたん）、片角丸ボタン（かた・かどまる・ぼたん）、長方形ボタン（ちょうほうけい・ぼたん）とそれぞれ呼びます。通常、標準ボタンと言ったら一番最初のボタンの事を指します。

以上の点を踏まえた上で早速先に進みましょう。

基本デザイン

常にシンプルに

最初に背景色が黒のキャンバスを用意しましょう。800x600ドット、1024x768ドットなどお好みで。

まず基本的に1つの LCARS ディスプレイは常に 1 つの情報を提供しています。 情報量が多い時には、1つ又は2つの補助的なディスプレイが並ぶ事になるので、間違っても1つのLCARSグラフィック画面に何でもかんでも詰めこもうとしないで下さい。汚くなって本物っぽく見えなくなります。

LCARS グラフィックの基本的なレイアウトは以下の物です。

LCARS の 画面

LCARS グラフィカル・ユーザー・インターフェイスは、基本的にはディスプレイのスタイルが 2 パターン、そしてコンソール部という全 3 種類に分類されます。 この事をまず頭に入れておいてください。

まずはインフォメーション・ディスプレイと呼ばれるものです。 LCARS の基本画面のこれは “上部表示エリア” と “下部表示エリア” とそれぞれ呼び、その比率はおおよそ 1:3 になっています。

映画『ネメシス』では、この縦横比ではない若干縦長のディスプレイが登場しています。

次にトータル・ディスプレイと呼ばれるものです。 デスクトップ端末でよく見られますね。

これは上下にバーがあるだけの非常にシンプルなデザインです。 上部の LCARS バーには、現在表示している情報のタイトルテキストを表示します。 下部の LCARS バーに補助情報のテキストが表示される場合もあります。

最後がコントロール・パネルです。 これを使って LCARS を操作します（もちろんディスプレイ上のボタンでも操作可能ですが）。

配色の研究

LCARS グラフィックの配色には、それぞれ特徴があります。 これには大きく分けて3つのタイプが存在します。これから描こうとする LCARS グラフィックはどのタイプなのか最初に決めます。

TNGタイプ

TNGでのエンタープライズやDS9でのディファイアント・ランナバウト、そしてヴォイジャーの LCARS パネルは、全体的に黄色系が多く使われています。

ファーストコンタクトタイプ

それまでの黄色が主体カラーだったのが、全体的にパープル系・ブラウン系の色味が増えています。 それによって今までの配色よりも、ずいぶん落ち着いた雰囲気に感じられます。

ネメシスタイプ

ここに来てずいぶん色が変わりました。全体的にブルー系の色味が増えて、寒々しい感じを受けるようになりました。

その前に奮い立たせよう！

さぁ、なんとなく LCARS グラフィック・インターフェイスの基本的な特徴が分かったかと思います。 ここで実際に LCARS グラフィックのレイアウトを考える前に、“本物の LCARS 画面”を観ておきましょう。 スタートレックを LCARS 画面だけに注目して観たり、ネット上にある TV 画面からキャプチャした LCARS 画像等を見てもいいでしょう。

特に「Star Trek: キャプテンズ・チェア」 や 「Star Trek: ザ･ネクスト・ジェネレーション インタラクティブ･テクニカル・マニュアル」 を見ると、早く LCARS グラフィックを描きたい衝動にかられます。 これらのソフトは「データハウス ビーグル」 が発売しているので、ぜひ手に入れられる事をお奨めします。 注：販売終了

一般的なデザイン上の誤り

大きさを統一する

ボタン等の要素を横に並ばせた時、それぞれの高さは合わせて、縦に並んだときのボタンの幅も統一して下さい。 そうしないと奇妙な物が出来てしまいます。 もし、違うサイズのボタンを同居させる場合は、別のスタイルのボタンを描きます（標準両角丸ボタン、片角丸ボタン、長方形ボタン等）。

隙間の広さを統一する

ボタン同士・枠同士のスペースは統一しましょう。 枠同士の隙間のサイズがあちこち違うようでしたら、とても見苦しく感じます。

縦横の比率

角丸部分の縦幅に対する横幅は 1/3 以下にすると美しくそれっぽく見えます。 逆に縦幅が横幅の 1/2 を超えるとカッコよく見えないので注意しましょう。

文字の並びを統一する

同じ要素の場合は文字の並びを統一して下さい。ボタンによって右に寄ったり左に寄ったりしていてはとても見苦しいです。

角丸ボタンの大きさ

長い文字列をボタンの中に入れてはいけません。そんな事したら不恰好になります。長い文字列はLCARSグラフィックのボタン以外の枠部分に描きましょう。

また、標準ボタンの大きさというのはある程度決まっています。実は、ボタンの縦横比が1:3の場合に最も美しく見えるのです。

インターフェースは常に 2D

LCARS グラフィックを描く時に、3D 化して陰を付けたりしてはいけません。 LCARS グラフィックはシンプルに洗練された 2D で描きましょう。

※ 第 10 作目の映画 『ネメシス』 では、一部 3D 化した LCARS ボタンが見られました。が、やはり基本は 2D だと思います。

LCARSフォントについて

Windows用TrueType LCARS フォントです。 Helvetica Ultra Compressedというフォント名をLCARSと変えてあるだけです。

Mac の場合も http://www.sil.org/computing/fonts/ttadopter.html にある TTAdopter というモノで、Mac 用のフォントに変換できるそうです。 情報：Data@ さん

LCARS カラーリスト

LCARSMANIA.COM 提供オクダグラムカラーリストです。

私が描く LCARS グラフィックやアニメーションはもちろん、当ウェブページもこのカラーチャートに基づいて製作されています。

カラーは TNG 以降バージョン（標準）・映画 『ファーストコンタクト』 バージョン・映画 『ネメシス』 バージョン、レッドアラートカラー、23 世紀、24 世紀、そして ENT バージョンまでもあります。

これは、録画テープや DVD での色をピックアップした色とネット上にある LCARS 画像の色とを比べて、自分の感覚で決定した色のリストです。 したがって、他で公開されているモノとは微妙に色が違うかもしれません。

もともと LCARS カラーにこの色！ という設定はなく、また画面上、見る角度や距離によっても違ってきますが、まぁ雰囲気は出ていると思います。 16進カラーと RGB カラーとあるので参考にして下さい。

• 画像ファイル OkudagramsColor.png(86KB)
• Adobe Flash 用カラーセット OkudagramsColor.cｌr(5KB) → Flash を起動し、カラーパネルの“カラーの置換...”）から読み込み）

長方形ボタンを入れる

長方形ボタンは入れたほうがいいようです。ブリッジ等では沢山の長方形ボタンが見られます。 もし、長方形ボタンが全く無いLCARSグラフィックの場合、あまり本物っぽく見えないので注意して下さい。

3次元コントロール・パット

このレイアウトは 3 次元の座標系の操作が必要なパネルに使われます。 例えば、艦のナビゲーション・星図の作成・操舵・素早いデータ検索の為などの用途です。 なので、医療室にある脳波スキャンのようなパネルには有り得ないですよね。

色を正確に

LCARS パネルには様々な色が使われているように見えますが、実はそんなに多くはありません。LCARS の要素上の文字色は必ず黒。黄色とかオレンジとかには絶対あり得ないのです。LCARS グラフィックの各要素にはすべて気を使ってください。

色を統一

グラフィックを描いている時には、常に現在選択している LCARS カラーを確認してください。 グラフィックソフト上にてすでに描いた物から、例えばスポイトツールなどで色を選択しないで、きちんとLCARS カラーリストから選択してから描くようにしましょう。そうしないと似たようなカラーがあるので間違えたりします。

3 桁のランダムな数字

LCARS パネル上には、あらゆるところに数字が描いてありますが、それらの数字は ランダムに 3 桁の数字を描くと本物っぽくなります。

また、長方形ボタン横の独立した数字は、2 桁ないしは 3 桁の数字を描きます。 その場合、数字および並びはある程度の規則性が見られるので、それにも注意するとより本物っぽく見える事でしょう。

9,16,30 や 44,6,17 という並び順は頻繁に見られます。

遊び心を入れる

LCARS パネル上には、上記の数字タイプの他に文字が入れてあるタイプもあります。 それらは、XX XXX のように 2 文字- 3 文字 というようになっています。

この文字、実はスタッフの名前や出演俳優の名前を入れてあるのです。

例えば、「RK BER」（RicK BERman)、「PT STW」(PaTrick STeWart)、「JN FRK」(JoNathan FRaKes)、「GT MCF」(GaTes MCFadden)、「MR SRT」(MaRina SiRTis)、「SS WCT」「LV BRT」(LeVer BuRTon)、「BN SPN」(BreNt SPiNer)、「MK DRN」(Michel DoRn)等です。

これを参考にして、自分で描く場合には"XX XXX"の形で適当にでっち上げましょう。 どうせ誰も見てません。

キャップの製作方法

最初に長方形を描いておいて、その後に高さの半分の径を持つ円を描き長方形に重ねるとキレイな角丸が作成出来ます。 決して、最初に円を描いおいてそれを半分に切ってから長方形に合わせて作るのではありません。

角丸の長方形ツールであれば一発で描けます。

角丸の作成法

さて、ここからはチョット難しい角丸パーツの作り方です。

角丸の外側の部分は簡単に出来ます。 外側の部分はまず “矩形塗りつぶし” ツールでステップ 1 のように描き、次にバーツの色と同じ色を選択した“円形塗りつぶし”ツールでちょうど良い角丸半径になるよう位置を決めて描画します。

内側の部分は外側とは逆転の発想で描きます。

最初に “矩形塗りつぶし” ツールでステップ 1 のように内側の部分を塗りつぶします。 次に黒色を選択して “円形ぬりつぶし” ツールで内側の部分をこれまたちょうど良い半径になるように位置を調整して描画すると完成です。

ペイント系ソフトだとこのようにチョットしたテクニックが必要になりますが、ドロー系ソフトだと “パスツール” を使ってここら辺の事が簡単に実現できるので、冒頭でドロー系ソフトがあったらあったで良いと言った訳です。

スペルをチェック

これはもう当然ですよね。 スペルの間違いは絶対避けなければなりません（私はよくやらかします）。 ネイティブ･スピーカも辞書の使用を推奨しているほどなので、自分がLCARSグラフィックに描いた単語のスペルに間違いが無いか “必ず” 調べてください！！ お願いだから、RETREIVAL SYSTEMS なんて描かないで下さいね。 恥ずかしいです。

（正しくは RETRIEVAL SYSTEMS です）

テクニカル上の考慮すべき点

LCARS 画像の保存形式

JPEG（ジェイペグ）は沢山の色を使っている場合でも、全面に渡って色があまり劣化しない写真用のグラフィック・フォーマットです。

以前はGIF形式がLCARSグラフィックには最も適したファイルフォーマットでしたが、例の特許問題のゴタゴタが起こってからというものの私自身GIFに見切りをつけました。

ネットワークの世界では GIF に代わるグラフィックフォーマットとして PNG が標準になってきています。 LCARSサイトの素材としても考える場合、LCARS画像はPNG形式で保存したほうがいいですね。

参考： wiki-PNG http://ja.wikipedia.org/wiki/Portable_Network_Graphics

レイヤー情報の保持

ウェブ公開用に PNG で保存しましょうと書きました。それとは別に使っているグラフィックソフトのレイヤー構造を維持出来るフォーマットでも保存しておきましょう。 もし後で修正したい時には、レイヤー構造を保ったままだとそれも容易に出来ると思います。

レイヤーの構造ですが、黒 1 色の背景レイヤー、LCARS 枠専用レイヤー、文字専用レイヤー、写真やグラフィック専用レイヤーという風に分けておくといいでしょう。

拡大して調査

描いた LCARS グラフィックを拡大して見てると色々アラが見付かるかもしれません。 最後の確認としてやっておいても損はありません。