ドゥアイネットのプログラマー、湯川が開発日記を綴ります。

CALENDAR
S M T W T F S
    123
45678910
11121314151617
18192021222324
252627282930 
<< November 2018 >>
ARCHIVES
CATEGORIES
【Fireworks】ボタンの作成
私は、ほとんどの場合Fireworksを使用してデザイン作業を行っています。
そのFireworksには、システムやwebページのデザインを行ううえで便利な機能をがいくつか備わっています。
その中の一つが、ボタンの作成です。

ボタンのデザインは、通常時のボタンとともに、ロールオーバー時やダウン時などのデザインもおこなう必要があります。(そうでない場合もありますが)

 

↑こういった感じですね。

通常時のボタンを作成した際にシンボル化することで、簡単にこれらを作成することができます。
シンボル化は、ボタンを選択して右クリックで行います。
シンボルの種類は「ボタン」です。

できたシンボルをダブルクリックすると、ウィンドウの表示が変わります。
下のプロパティにステートという項目があり、この内容がボタンの状態を表しています。
アップはボタンの上にマウスがない状態(通常時)、オーバーはロールオーバー時などです。

はじめはアップのボタンしか表示されておらず、他の状態を選択するとボタンはなくなります。
そのかわり「アップのグラフィックをコピー」というボタンが現れるので、それをクリックすると、アップと同様のボタンが表示されます。
そこで色を調節して、通常時以外のボタンを作成します。

必要な状態のボタンを全て作成したら、キャンバス内のシンボル以外の部分をダブルクリックしてウィンドウを戻します。

このシンボルを「ファイル→書き出し」から書き出すと、通常時だけでなく作成した他の状態のボタンも一緒に書き出してくれます。
一つ一つ作成するよりもはるかに効率的ですね。

これはごく最近発見した機能でした。
もっと早く見つけていれば・・という思いもありますが;
こういった機能を使いこなせると、なんとなくプロっぽいですね。


※上記で紹介した内容は、FireworksCS4での方法です。他のバージョンだと操作が少し変わってくると思います。
| デザイン | 18:54 | comments(0) | - |
ゲームの画面
 先日MA6に応募したツイッターガジェットですが、今回そのデザインを担当させてもらいました。

普段は業務用のシステムの画面デザインを行うことがほとんどですが、今回は遊びや息抜きに使うようなアプリなので、「堅い」雰囲気にならないように気をつけました。

休みの日にたまにゲームをすることがあります。
家庭用ゲーム機や携帯ゲーム機、携帯電話のアプリなど・・
そのゲームの画面が今回のデザインでとても参考になりました。

システムの画面では、シンプルでクールなデザインが多く、ボタンなどは下の絵のようにグラデーションを使った立体的なものがほとんどです。




ゲームでもこういったデザインのものは多いですが、反対にフラットでナチュラルな雰囲気のもの多くあります。
下の絵は、今回のツイッターガジェット用に作成したボタンのひとつです。




かわいらしい雰囲気だったり、にぎやかだったり、クールだったり、そのゲームやアプリの内容に合わせてデザインされています。
デザインの仕事を始める前までは、特に意識してゲームの画面を見たことはありませんでしたが、今では「どんな色が使われている?」「どんなボタンだろう?」ということを考えるようになりました。

ゲームに限らず、いろんなものを見てデザインの参考にしていこうと思います。
| デザイン | 19:53 | comments(0) | - |
半透明のデザイン
 デザインを考える際によく半透明の画像を使います。

半透明の画像を使うと、背景が薄っすらと見えてなんとなくカッコいいです。
少し使ってみるだけでもずいぶんと印象が変わるように思います。

最近では、ツールチップを半透明で表現してみました。

半透明のデザイン

これは、現在製作中のツイッターアプリのデザインの一部です。
鳥の頭上にあるのがツールチップで、鳥にマウスを乗せると表示されます。

これだと少しわかりにくいかもしれませんが、ツールチップの青い部分の
不透明度を75%にしています。(背景はデスクトップの壁紙です)

いろんなウェブサイトを見ていても、最近はこういったデザインはとても多いですね。
| デザイン | 18:40 | comments(0) | - |
iPad/iPhoneアプリにおけるデザイン
iPadで動かすアプリ用の画面をデザインしました。

当然ですが、標準の部品が異なるため、PC用システムのデザインと
同じように作るわけにはいきません。

例えば、PCでのドロップダウンリストは、iPadまたはiPhoneでは
以下のような部品になります。



指で縦にスライドさせ、右または左のリストを回転させて項目を
選択することになります。

通常のドロップダウンリストも使えるようですが、上記の部品を
使ったほうがカッコイイしiPadらしいですね。

もちろん、自分でデザインして作ったオリジナルのパーツも使えます。
画面の一番上に表示されている部分(時間などが表示されているバー)を
ステータスバーといいますが、このステータスバー以外は背景やアイコン
ともにオリジナルパーツを製作できます。
しかし、そうすると開発時の工数が膨らんでしまいます。

標準部品を使うかオリジナルにデザインしたものを使うか、状況に応じて
見極める必要があるようですね。
| デザイン | 19:13 | comments(2) | - |
配色の考え方
 配色には、以下の二つの考え方があるそうです。

アナロジー・カラーコーディネート
全体的なまとまり感を目的とした配色方法。
同系色や類似色、似通ったトーンの組み合わせでまとめる。
統一感があり、穏やかで大人しい。
変化がなく面白みにかけるという一面も。

コントラスト・カラーコーディネート
変化やきわだちを特色とする配色方法。
反対色や補色、対照的なトーンの組み合わせでまとめる。
すっきりとしてクリアな感じ。
パワフルでインパクトがある。

ちなみに、補色というのは色相環で正反対に位置する関係の色の組み合わせのことです。

↓色相環




たとえば、青と黄色、赤と緑、紫と黄緑 ・・・ などです。

青のベースにアクセントとして黄色(オレンジ)などの組み合わせは、WEB上でもよく見かける気がしますね。
反対に、赤とオレンジ、青と緑・・・などは、同系色や類似色の組み合わせということになります。

見る人にどんなイメージを伝えたいかで、配色の仕方も大きく変わってくるのだと思います。
「なんとなく」で色を組み合わせるのではなく、根拠を持ってコーディネートしていく必要がありますね。
| デザイン | 12:12 | comments(0) | - |
色について
 7月に、カラーデザイン検定という「色」に関する検定を受けようと思っており、
試験に向けて勉強を進めています。

その勉強で得た知識を少し紹介したいと思います。


色の好みは、人それぞれ違うと思いますが、年齢や性別、住んでいる国によって
ある程度の傾向が出てくるようです。

○年齢でみると
幼児は純色(赤や黄、青など)を好む。
小学校高学年になるにつれて好みが別れ、年を重ねるとともに、鮮やかな色や
明るい色への好みが減っていく。

○性別でみると
子供の場合、女の子は暖色系、男の子は寒色系を好む。
成人では性差はほとんどないが、女性はパステル色を、男性は青や緑などの
暗い色を好む。

○国で見ると
日本人の場合は青、白が特に好まれ、紫系は好まれない。
異文化間では大きな差はなく、共通して好まれる色は青系。
しかし、日本人が好む白は、他国では10位以内にも入っていない。


色の好みからは、その人の性格も見えてくるようです。

・赤を好む人     ・・・ 積極的で衝動的。外交的。
・ピンクを好む人   ・・・ 情愛、繊細、純真。女性的な魅力に恵まれている。
・オレンジ色を好む人 ・・・ 陽気でユーモアに富んでいる。雄弁で愛想が良く、社交的。
・黄色を好む人    ・・・ 理想主義者で知的。純潔で高潔な心を持つ。
・緑を好む人     ・・・ 偏見がなく寛大、自由人。バランスのとれた人物。
・青緑を好む人    ・・・ 繊細な感覚の持ち主。鋭い感受性や知性もあわせ持つ。
・青を好む人     ・・・ 内向的性格。保守的。責任感が強い。
・紫を好む人     ・・・ 貴族的で芸術家気質。神秘的。
・ブラウンを好む人  ・・・ 実質的、堅実型。保守派。素朴で庶民的。


テスト結果などからこういった傾向がみられるようですが、科学的根拠などは
ないそうなので、必ずしもあてはまるとは言えなそうです。

しかし、お客様の好みに合わせてデザインを作成していく際には、この傾向を元に
色を選ぶのも一つの手段ですね。


色の勉強をすることで、自分が考えた配色に対して、意図を明確に持たせることが
できます。「なんとなくこの配色」ではなく、説得力のあるデザインができるように
なればと思います。
| デザイン | 20:08 | comments(0) | - |
a タグでの submit
 HTMLでFormを組み、「送信する」などのボタンをクリックして
値を送信するページを作りました。

初めはこのボタンを

<a href="javascript(0);" class="btn_submit" onClick="onBtnSubmitClick()" />

というようにしていました。
クリックしたときにJavascriptで作成した onBtnSubmitClick() を呼び出し、
その中で

document.formInput.submit();

を実行し、送信処理(画面遷移)を実行していました。

IE7や8だと問題なく動くのですが、これがIE6だと動きません。
submit 直前まではきちんと動いているようなのですが・・

急ぎだったので、全ての画面遷移用ボタンをinputタグに変更しました。

<input type="image" src="../img/btn_submit_off.gif"
 onmousedown="this.src='../img/btn_submit_active.gif'";
 onMouseOut="this.src='../img/btn_submit_off.gif'";
 onMouseOver="this.src='../img/btn_lsubmit_over.gif'";
 onclick="onBtnSubmitClick();">

これでうまくいったので良かったです。

その後ちょっと調べてみたところ、onclick に設定した関数のあとに
return false を追加したらうまくいくとありました。

<a href="javascript(0);" class="btn_submit" onclick="onBtnSubmitClick();return false;" />

まだ試していないですが、a タグのほうがすっきりと書けるので、
これから作成する際には活用してみようと思います。
| デザイン | 18:52 | comments(1) | - |
CSSメモ【1】
最近CSSで新しく知ったことについて。

background-colorで背景色を指定することができます。
反対に、特に背景色を設定しない場合はどうすればいいのか?

background-color: transparent;

これで背景を透過させることができます。
例えばテキストボックスであれば、それを置いているものの背景色(テーブルの中にあるならそのテーブルの色など)が透けて表示されます。

もうひとつ。
リストボックスでのpaddingの指定は、IEとSafariでは対応されていないようです。

paddingは内側の余白を指定するものであり、例えばテキストボックスに

padding:5px;

などすると、文字を入力する部分の上下左右に余白ができてすっきり表示させられます。
これを使ってリストボックスの高さを調整したかったのですが。。
指定しても全く変化がなかったので、調べてみると未対応とのこと。

前回も書きましたが、ブラウザによって表示のされ方が全く違うと改めて実感しました。
| デザイン | 19:15 | comments(0) | - |
ブラウザによる解釈の違い
初めまして、ドゥアイネット入社二年目の佐藤です。
開発・仕様書作成・画面デザインの作成などを行っていますが、特にデザインに関して勉強中です。

日々の仕事の中で学んだこと、感じたことをここに書き込んでいきたいと思います。

現在は、htmlファイルの作成を行っています。
画面のデザイン案を元に、画像など配置して作っていますが、なかなか思うように表示されず、苦戦しています。
コードは問題ないはずなのに、どうして?と思うこともあります。

調べてみると、ブラウザによってHTMLやCSSの表示のされ方が違うようです。
というより、IEには正しく解釈されない、ということがけっこう多いみたいです。
Firefoxの方がうまく解釈してくれるらしく、確かにFirefoxで確認してみると、きちんと表示されていました。

IE用によく知られているバグ対応を入れてやって、ブラウザ間の差異をなくしていく必要があるようです。

また、IE6とIE7でも解釈が違う所があるので、自分のPCで見たときとお客様のPCで見たときとで表示が違う、ということにならないように気をつけなければと思いました。
| デザイン | 17:56 | comments(0) | - |
| 1/1PAGES |