ロータスアプリケーション技術者が作るワクワク。

アクロス株式会社
Wisdom as a Service
テクてく Lotus 技術者夜会参加の皆様
ロータスアプリケーション技術者が作るワクワク。
サイトデザインはアイコン作成から始めよう！
2015年6月19日
原山国治
はじめに
セッション 1 (講義): ロータスアプリケーション技術者が作るワクワク。サイトデザイン
はアイコン作成から始めよう！
IBM Notes/Domino は古い。こう言われ続けていますね。とても残念だし悔しい限り
です。IBM Verse など新しいインターフェイスのソリューションが出てきてはいますが、
ロータスアプリケーション技術者が作成するアプリケーションは旧来のインターフェイスのも
のが多いように思います。
Web デザイナーではない僕らにもできるサイト体験ワクワク作りはアイコン作成からだ
と思っています。フリーソフトの InkScape を使ったアイコン作成と XPages サイト適用例に
ついて御紹介させて頂きたいと思います。
1
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
代わり映えしないオーダーメイドアプリケーションのユーザーインターフェース
慣れたインターフェイスは理解しやすいけれど、一方で新鮮みに欠けます。
2
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
アイコン配置前
アイコンがないよりも、
3
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
アイコン配置後
アイコンがあると方が、受ける感覚(体験)が良くなると思いませんか？
4
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
アイコン配置コード
この例ですと、追加するコードは、たったの３行ぽっきり
アイコン代は、御客様は負担してくれないでしょう！
ならば、ベンダー側でデザイン標準を作成し、個々のPJTで適用してあげる。
こらなら現実的な解になりえると僕は思います。
5
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
Inkscape
A) Open Source XML/SVG/CSSグラフィックツール
1つだけ「難」があります^^;
Inkscapeよく固まります...無料なんだから気にしない
6
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
Inkscapeでこんなの作った事があります。
7
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
良く使う描画機能
■グリッド上に接点を配置する
A) 画面右上のスナップ有効化をクリック
B) 画面右下のグリッド・ガイドにスナップをクリック
■線分、○、□を書く
■文字を書く
■色を付ける
■オブジェクト合成
A) 統合
B) 分割
C) 排他
8
■png画像にエクスポート
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
「メール」アイコンを作成する
1.
2.
3.
4.
5.
四角を書く(縦横比６：１０くらい)
四角をトリミングする
トリミングコーナーの開始位置を通る様三角を書く
「パス分割」する
上部のオブジェクトを↑に移動する
以上
9
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
「トピック」アイコンを作成する
1.
2.
3.
4.
四角を書く(縦横比７：１１くらい)
四角をトリミングする
左寄りに直角三角形を書く
「パス統合」する
以上
10
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
「返答」アイコンを作成する
1.
2.
3.
4.
四角を書く(縦横比７：１１くらい)
四角をトリミングする
左寄りに直角三角形を書く
「パス統合」する
以上
11
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
トピックへの「返答」アイコンを作成する
1.
2.
3.
4.
5.
少し足が長い「返答」アイコンを作成する
返答図形を左右反転する
返答図形を小さくする
返答アイコンをトピックアイコンに重ねる
返答アイコンの「ストローク」に幅設定する
以上
12
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
「編集」アイコンを作成する
1.
2.
3.
4.
四角２つと三角１つを描く
３つのオブジェクトを選択する
オブジェクトの「変形」メニューを選択する
「回転」タブで角度入力し、オブジェクトを回転する
以上
13
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
「ドキュメント」アイコンを作成する
1.
2.
3.
4.
5.
サンプルアイコンをなぞって五角形１つを書く
四角１つを描き、重ねる
２つのオブジェクトを選択する
オブジェクトの「分割」メニューを選択する
左上の三角オブジェクトを選択し、中の色をストロークの色と同じにする
以上
14
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
「割合」アイコンを作成する
1.
2.
3.
4.
5.
円を書く
始点を握り、弧/扇形を描く
テキストで割合を書き、弧/扇型オブジェクトに重ね。
テキスト色を変更する
２つのオブジェクトを選択し、オブジェクトの「排他」メニューを選択する
以上
15
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
「人物」アイコンを作成する
1.
2.
3.
4.
5.
円と三角を描く
画面左上の「ノードツール」をクリックする
三角の上部頂点をクリックし、「選択ノードの種類を対象に」をクリックする
対象頂点を中心に表れる線分の端点を握り、左右に伸ばす
下部オブジェクトを円オブジェクトに重ねた後、パス結合する
以上
16
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
「Undo」アイコンを作成する
1.
2.
3.
4.
5.
円２つを描き、２つを重ね合わせ、「パス差分」する
四角を描き、円オブジェクトと重ね合わせる
２つを選択し、「パス差分」する
対象頂点を中心に表れる線分の端点を握り、左右に伸ばす
下部オブジェクトを円オブジェクトに重ねた後、「パス結合」する
以上
17
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.
よろしくお願いいたします。
アクロス株式会社
www.acro-x.com
東京都中央区日本橋箱崎町20-1 アンソレイエ 3F
TEL 03-3660-6651 FAX 03-3660-6652
〒103-0015
愛知県名古屋市中区丸の内3-23-8 フレーヌ丸の内ビル 3F
TEL 052-971-6651 FAX 052-971-6652
〒460-0002
大阪府大阪市北区梅田2-2-2 ヒルトンプラザオフィスタワー19Ｆ
TEL 06-6133-5620 FAX 06-6133-5645
〒530-0001
“知恵をビジネスに活かすサービス”ブランド
Wisdom as a Service
18
Copyright © 2015 ACRO-X CORPORATION. All right Reserved.

Download Report