Adobe XD #06 タブバーのデザイン アイコンとラベル

投稿者: | 1月 29, 2021

仮想アプリ開発

練習用に仮想アプリをでっち上げよう。その名は「健チャレ」。健康にチャレンジである。みんチャレのパクリ…ではなくリスペクトした妄想アプリである。今トレンドのヘルステックにも参入したつもりになれるのだ。

仮想空間には法律も規制も常識もない。やりたい放題、まさに異世界無双なのであるうううううううう!BAAAAAAAAN!

ジョジョって長いよなぁ…昭和からジャンプに掲載されてなかったかな。

で、その妄想アプリの画面である。

前回はタブバーの画面のテンプレートを新規プロジェクトにコピーした。これを下敷きにしてアプリの画面を作成していく。

構成はタイトルバーに検索窓、スクロールするリストにタブバー。タブバーには5つのボタンを置く。それぞれに文字とアイコン、色の設定が必要となる。

タブバーのデザイン

画面のスクロール

アートボードの表示位置をずらすのに、上下はマウスのホイールで動かせるが左右が動かない。

不便で仕方がない。

だが、Adobe社たるものが、こんな根本的かつ基本的かつ根源的かつ本質的かつ基礎的なことを実装しないなんてことがあるだろうか。

否、ありえない。

調べてみて分かった。スペースキーを押すとマウスアイコンが手の形に変わるので、そのままアートボードをマウスで好きな位置に移動できるのだ。

文字列の変更

まずは文字を設定する。”Tab1″の部分が選択状態になるまでしつこくダブルクリックする。6回でようやく編集可能状態になった。

文字を「チャット」に変更する

同様に他の文字も編集していく。

アイコンの設定

アイコンにはフリー、商用可能の素材を使う。あくまでも妄想アプリなので問題ない。実際の開発ではデザイナーに依頼せねばならぬ。アイコンは下記のサイトから拝借した。

5種類のアイコンのSVGファイルを下記のファイル名にしてダウンロードした。

アイコンファイル名
チャットicon-chat.svg
記録icon-log.svg
グラフicon-graph.svg
カレンダーicon-calender.svg
設定icon-setup.svg

マウスで❶の部分をしつこくクリックする。そうして判明したことは❶がアイコンではなく文字であったことだ。

この文字を画像に置き換える。

文字を削除して、文字領域の外側をクリックする。編集が終了する。

アイコンを配置する場所(水色の四角の部分)をクリックする。

Explolerからチャット用のアイコンファイルをドラッグ&ドロップする。

これでアイコンが配置された。同様に他のアイコンも設定する。

レイヤーの表示

Ctrl+Yを押すか左下のひし形が重なったアイコンをクリックするとレイヤーが表示される。

各オブジェクトの階層構造が見れるので便利である。

アイコンの配置

なんだかアイコンが上に寄っているので、少し下にずらしたい。レイヤーでタブをすべて選択する。Tab1をクリックし、Shiftキーを押しながらTab5をクリックすれば選択できる。

アイコンの部分が青く選択されるので、これを下にドラッグして位置をずらす。↓カーソルキーでも位置をずらすことができる。17ピクセルほど下にずらした。

色の変更

画像ソフトで作成した画面では、タブバーは薄い緑の背景で、アイコンは濃い緑である。色の変更をしなくてはならない。

表示色は#57BF6Aである。
背景色は#E5F2E8である。

これら色を設定する。

背景色の設定

レイヤーでBackgoundを選択する。タブバー全体が選択状態になる。

右側のプロパティインスペクターにパラメーターが表示されるので、下の方にスクロールすると「塗り」とチェックの入った項目が表示される。

「塗り」の部分をクリックする

#F9F9F9が現在の色成分なので、これを#E5F2E8に置き換える。ついでにαチャネルを94%から100%にしておく。

これで背景色が変更できた。

ドキュメントアセットへの追加

この色はあとから使いまわすことも多いだろう。アセットに登録しておくと再利用できるようなのだ。

左下の四角いアイコンをクリックするとかShift+Ctrl+Yを押す。

ドキュメントアセットをクリックする。

「カラー」をクリックする。

「カラー」の右にある「+」をクリックすると色が追加される。

このままでは分かりにくいので、#E5F2E8の部分をダブルクリックし、名称を設定する。

表示色の設定

続いては文字とアイコンの色である。まずはアイコンの色を変えよう。レイヤーからチャットのアイコンを選択する。

右側のプロパティインスペクターをスクロールし、塗りをクリックして色を設定する。

先ほどと同様に色をアセットに追加し、名称を変更する。

他のアイコンも色を変更する。階層構造をいちいち開くのは面倒くさいので、レイヤーの検索に”icon”を入力してオブジェクトを表示させると素早くアクセスできる。

色を変更するアイコンを選択し、ドキュメントアセットを表示する。「表示色」をクリックすれば、アイコンの色が変わる。

便利だ。無詠唱で魔法が使えるくらい便利だ。

  1. Ctrl+Yでレイヤーを表示してオブジェクトを選択する
  2. Shift+Ctrl+Yでドキュメントアセットを表示して色を選択する

この繰り返しでアイコンの色をすべて設定できた。

続いて文字の色を設定する。同じ要領だ。名前でオブジェクトを絞り込めないので、ちゃんと絞り込める名前を付けておけばよかっと後悔するが、いまさら遅い。すでに矢は放たれたのだ。サイは投げられたのだ。幕は上がってしまったのだ。

次の機会には注意しよう。

次回はナビゲーションバーの設定をしよう。