Blog

※ブログ移転しました。 → hamashun.me

2007年09月Archives

2007年09月04日

ブラウザのデフォルトスタイルをリセットする手段、ユニバーサルセレクタとタイプセレクタの違いは?

ブラウザのデフォルトスタイルをリセットする際にユニバーサルセレクタを使用すると、読み込みが遅くなるとか言う話があるんですけど、具体的にどれくらい遅くなるのかという話は聞いた事がありません。
なので、調べてみました。

ソース

使用したソースは以下の2種類です。
なお、2番目のソースはYUIで公開されている物を使用しました。

* {
 margin: 0;
 padding: 0;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
 margin:0; 
 padding:0; 
} 

それぞれを当サイトのcssファイルに書いて、Firebugでcssファイルの読み込み時間を100回づつ計測しました。
計測したのは、2007年9月2日の夜23時頃、ADSL回線の自宅からです。
その結果のcsvファイルをアップしておきます。

結果

両者の読み込み時間の平均値を計算しました。 単位はmsです。

ユニバーサルセレクタ平均値
151.76
タイプセレクタ平均値
197.36

あれ?

なぜかユニバーサルセレクタの方が軽いという結果になってしまいました。
100回だと足りなかったのかも。 て言うか、こういうのって何回くらい計測する物なんでしょうか。 1000回くらい?

読み込みが遅くなるという話はどこから出た?

そもそも誰が言い出したんでしょうか? よく引き合いに出されるのはEric Meyer氏だったりしますけど、全称セレクタを用いたスタイルの正規化 | Web標準Blog | ミツエーリンクスを読むと、

彼が全称セレクタを用いない理由として挙げているのは負荷云々ではなく、正規化の影響がフォームコントロールに属する要素にまで及ぶのを避けるため、としています。

とあります。 これは主にborderの事を言ってると思うんですけど、確かに、ユニバーサルセレクタでborderまでリセットしてしまうとのはどうかな、と思います。 フォームパーツとか、逆に手間が増える感じ。

個人的な意見

僕個人は、デフォルトスタイルをまとめてリセットをするのは基本的にはmarginとpaddingのみです。 場合によっては、font-sizeやline-heightなどが加わります。
borderをリセットする必要があるのはimg要素とfieldset要素くらい?

て言うか、もし読み込み云々という理由でユニバーサルセレクタを使わないのであれば、YUIやいわゆるリセット用CSSをそのまま使いまわすというのも違うんじゃないかなと思います。 そのサイトで使っている要素のみを書くべきで。
でもそうなると、更新の時とか面倒な気が。

あるいは、*{ margin : 0 }はもう古い!? - Emotional Webでのコメント欄のやり取りも興味深いです。 今後、そういったブラウザが登場するかはさておき、考え方として。

結論

borderをリセットしなければ、ユニバーサルセレクタで問題無いのでは。

おまけ

ここまで書いて気づいたんですけど、Firebugが計測してるのって、「ファイル読み込み→ほげほげする→実際の描画」までの時間でいいのだろうか。
もしもファイルの読み込みのみだったら、この記事はだいぶ意味無い事に。。。

何にしても重箱の隅すぎる・・・・・・w

はじめてのプログラミング(csvから列の平均値を計算するソフト)

前回の記事でcsvファイルから平均値を求めるために、最近勉強中のひまわりを使って専用プログラムを書いてみました。 初プログラムです><
一式置いておきますけど、あまりのショボさにびっくりする事請け合いです!><;
ブクマで「それエクセr」とか言われそうですけど習作なのでごめんなさいごめんなさい!><

ひまわりって?

日本語でプログラムが組めます!
Perlを日本語にしたような感じらしいので、マークアッパーが初めてさわるのにもいいんじゃないかな!
しかもexeが簡単に作れるから夢が広がりんぐ。

ソース

{csv_averagr ver,超α}
母艦の、タイトルは、「csv_averagr ver,超α」。
母艦の、幅は、325。
母艦の、高さは、560。
灰色で、画面クリア。


{テキスト表示}
(10,10)へ、移動。
文字サイズ=10。
「csvファイルを読み込んでボタンを押すと、
それぞれの平均値が算出されます」と、表示。


{左右入力欄}
'左欄作成
表示グリッドを、グリッドとして、作成。
その、サイズは、(10,80,315,460)。
表フィールド名は、オン。
その、編集は、オン。
その、アイテムは、『回数,ユニバーサルセレクタ,タイプセレクタ
』


{ボタン作成}
'ユニバーサル平均値
「\n」と、表示。
ユニバーサル平均値ボタンを、ボタンとして、作成。
その、テキストは、「ユニバーサルセレクタの平均値を表示」。
その、イベントは、(ユニバーサルセレクタ平均値表示)。

'タイプ平均値
タイプ平均値ボタンを、ボタンとして、作成。
その、テキストは、「タイプセレクタの平均値を表示」。
その、イベントは、(タイプセレクタ平均値表示)。

'開く
(10,50)へ、移動する。
開くボタンを、ボタンとして、作成。
その、テキストは、「csvファイルを開く」
その、イベントは、データ読込処理。

待機。


*ユニバーサルセレクタ平均値表示
表示グリッドの,1列目の,表平均値。
ユニバーサル平均値に、それを、入れる。
「{ユニバーサル平均値}」と、言う。
待機。

*タイプセレクタ平均値表示
表示グリッドの,2列目の,表平均値。
タイプ平均値に、それを、入れる。
「{タイプ平均値}」と、言う。
待機。


*データ読込処理
『csv』の、読込ファイル選択。
もし、それが、「」ならば、待機。'キャンセルの時
ファイル名は、それ。
ファイル名を、開く。
表示グリッドの、アイテムは、それ。
待機。

こんなのです。 一部、どうしても分からない部分があったので、そこだけひまわりを紹介してくれた先輩に教えて貰いました。

多分、他の人が見たらどうしようもなくへっぽこなデキなんでしょうけど、自分で作った物って凄い愛着が沸きますね!
当面の目標は、自分仕様のついったークライアントを作る事・・・・・・!(いつになるやら)

2007年09月09日

デザイン勉強会のまとめをするよ!

追記

FrontPage - デザイン勉強会まとめサイト - livedoor Wiki(ウィキ)

  1. デザイナーでない人のデザイン入門
  2. ベジェ曲線で行こう
  3. 簡単に名刺を作ろうぜ!
  4. Webサイトのあり方と考え方
  5. 総括

Twitter繋がりのまめこが主催するデザイン勉強会に行ってきました。 という訳でまとめです。
この勉強会は、デザイナー向けではなく、デザイナー以外に向けたデザイン勉強会です。

会場は今回も株式会社ノッキングオン様に提供していただきました。 いつもありがとうございます!

なお、まだ資料とか公開されていないセッションもあると思うので、タイトルとか微妙に間違ってるかもしれません。 間違ってたらごめんなさい。

デザイナーでない人のデザイン入門

資料

トップバッターは先生もされているcremaさんです。 話の仕方もさすがスムーズで、会場を暖めてくれました。
ちなみにcremaさんは「くれま」さんって読みます。「クリーム」のスペイン語なんだそうです。

さて、cremaさんが話してくれたのは、デザインの4原則に則った内容です。
デザインの4原則とはこれらです。

  • 近接の原則
  • 整列の原則
  • 対比の原則
  • 反復の原則
近接の原則

情報は、グループ分けが肝心。 意味的に近い情報同士は、近くに配置するとよい。
その為には、情報を分析する必要がある。 例として資料に載っていたチラシには、タイトル・製品紹介・申し込み情報・講師紹介、などの情報があった。

まずは、グループ化した要素ごとに間隔をとってみる。
写真と紹介文で一組として、それが複数並ぶようなデザインの場合は、一組ごとに間隔を空ける。

整列の原則

基準線、という存在が重要。 グラフィックソフトで言うところの「ガイド」や「グリッド」。
これに沿ってテキストの端を揃える。 左揃え、中央揃え、右揃え、両端揃えが考えられるが、中央揃えと右揃えは行の開始位置がバラバラになってしまうので、バランスを取るのが難しい。
よって最初は左揃えや両端揃えにするとよい。

また、イラレやInkscapeなどのソフトを使用する際には、数値を過信しすぎてはいけない。
数値上では揃っていても、人間の目と脳がズレていると認識してしまう事がある。

対比の原則

重要な部分とそうでない部分に差を付けて、目立たせる事。
大きくしたり太くしたり色を変えたりする手法が考えられる。 普段何気なく行っている、ヘッダ部分にメインビジュアルを置いたり、見出しのフォントサイズを大きくするのもこれ。

また、「ジャンプ率」という用語がある。
これは見出しと本文などの文字サイズの比率を変える事。 例えば、スポーツ新聞の見出しと本文のような差は「ジャンプ率が高い」と言える。
ジャンプ率が高いと目立ちやすいが、下品な印象を与えやすいので注意が必要。

反復の原則

繰り返しの要素を入れて、リズム感を出す。
通常、同じレベルの見出しは同じ色、同じ文字サイズにするが、これは反復の原則に則っての事である。

tips:デザインはどこから行う?

ありがちなのが、上から下へ、順番に行う方法。
しかしこれでは、最後にスペースが余ってしまった場合に対応できない。

そこで、上→下→中央、という順番にデザインするとよい。
中央でスペースが余りそうになった場合、ビジュアル要素のサイズを変えるなどで自然な形で対応できる。
(これはWebというよりは、スペースが決まっている紙デザインで特に言える事だと感じました)

tips:イラレの使いこなし術

キャンバス内に同じ枠を複数並べたい時(4コママンガの枠みたいにしたい時)には、

  1. 矩形ツールで大枠となる四角形を描く
  2. その四角形を選択して、上部のメニューのオブジェクト→パス→段落設定 を開く
  3. そこで「プレビュー」にチェックが入っている事を確認して、数値を色々変えてみる
  4. 入力した数に四角形が分割される

なお、分割した四角形の内、任意の数をShift+クリックで選択すると、更に分割したり、或いは結合したりもできる。
こうすると、4コママンガではなく普通のマンガのコマ割みたいな事が簡単にできる(文字で読むより、リストの順にやってみた方が解りやすいです)。

まとめ

「4つの原則」は凄く大事。 これを守るだけで、かなり「デザイン」できる!

おまけ

デザインもやはり、数をこなさないと自分の物にならない。
という訳で、cremaさんオススメのサイトや本を紹介してくれました。 公開される資料をチェックしてください。

ベジェ曲線で行こう

資料

多くの人はプログラマだと認識していたcheebowさん。
実は過去には看板や駅の時刻表を作る仕事をされていたんだとか。 その業界のおっちゃん達にドローソフトを教えていた事もあったらしく、ドローソフトのキモとなる「ベジェ曲線」に特化した話をしてくれました。

そもそもベジェ曲線とは?

N個の制御点から得られるN-1次曲線である。

何それ?

ってWikipediaに書いてあるけど訳わからないよね!との事。 解りません。
実はベジェ曲線とは、OSのAPIとして用意されている物なんだとか(Winの資料 Macの資料)。
そうなるとエンジニア思考としては、コードの方がラクなんじゃない?→APIでベジェ曲線を描こう! となる人もいるけど(上記の資料にサンプルコードが載っています)、それはやりすぎ。

ベジェ曲線を解りやすく

「点」と、その点から出る「方向線(・―――・―――・ ←こんなの)」で描く曲線の事。
この「点」は「アンカーポイント」。「方向線」は「ハンドル」と呼ばれる(ソフトによって文言は微妙に変わる)。

アンカーポイント(点)とアンカーポイント(点)をつなぐ事で、線ができる。
アンカーポイントに対してハンドル(方向線)を操作する事で、なめらかな曲線が描ける。
・・・・・・とか、ここで読んでも意味不明だと思うので、Inkscapeをインストールして、左のメニューから「ベジェ曲線」を選んで色々やってみるといいと思います。

基本のキ

直線は、クリックのみで描ける。
曲線は、アンカーポイントとハンドルを使って描く。
また、例えばマクドナルドの「m」の字のように折り返す線を書く場合には、クリック→Shift+ドラッグとする(これもソフトによって多少変わる)。
・・・・・・とか、これも読んでも意味不明だと思うので、とりあえずインストールして手を動かすといいと思います。

線を決める要素
  • アンカーポイント(線)の場所
  • ハンドルの長さ
  • ハンドルの方向

アンカーポイントの場所は自由!
ハンドルの長さも方向も自由!

「自由」と言われても、どうすればいいのか分からないよね。 これはPerlとかでも同じかもしれない。
だからベストプラクティスとか読んじゃうのかも。 との事。

シンプルに考える

書きたい絵の、全ての点の場所や長さを最初に考えるのは大変。 なので、まずは「アンカーポイント(点)の場所」と、「ハンドルの水平・垂直」だけを考える。
もちろん、それでは描けない物も出てくるけど、練習の段階として。

細かい事は後まわし

なお、プログラマーは「例外」を考えてしまいがちだけれど、ベジェ曲線に関しては考えないで大丈夫。
「これで本当に描けるの?」とか思っても、とりあえず描いてみる。 後から修正するのは簡単。

プログラムを書く時も、人によってフローが違ったりする。
まずはコメントだけを書いていって、やる事を把握して、それからコメントの場所にコードを書いていく人もいれば、
イチからガーっと書いていく人もいる。
ベジェ曲線では最初から完璧を目指すのは大変なので、まずは大まかに描いて、それを修正していく方がオススメ。 彫刻とかもそうなのでは。

習作:トランプのマーク

トランプのマーク(ダイヤ・ハート・スペード・クローバー)は練習材料に最適。
jpgとかでトランプのマークを用意して、それを読み込んで、ペンツール(ベジェツール)でトレースして(なぞって)練習する。

クローバーは、よく見ると3つの丸と一つの楔形でできている。 実際の業務としてこういった図形を作る場合は、円系ツールと矩形ツールで作った方が効率がよい。

もっと知りたい人

トランプのマークのように、何かを読み込んで、トレースの練習をするとよい。
(ちなみに、このサイトのヘッダにいる動物達もそうやって作りました)

tips:アンカーポイント(点)だけで絵を描ける?

ぶっちゃけると描ける。 絵の曲線に沿って超細かく点を打っていけば、結果的に曲線を描ける。
でも、CPUの負荷が比例して上がっていくので、よくない。

tips:左右対称のロゴとかを描く時にラクする手段は?

半分だけ描いてコピペ。 それを反転すれば半分の作業量で済む。

まとめ

ベジェ曲線とは、アンカーポイント(点)とハンドル(方向線)でできている。 それぞれの役割は、アンカーポイントで線を繋いでハンドルで曲線の具合を決める、という物。
最初は、アンカーポイントを打つ場所は(図柄の)線の頂点・折り返しで、ハンドルは水平・垂直に出す(・―――・―――・ ←こういうのが一直線になるように)ようにする。 それで思い通りの物ができなかったら、編集ツールで調整する。

ツールは、とりあえずInkscapeがオススメ。 無料だし。
トランプのマークをトレースして練習する。

簡単に名刺を作ろうぜ!

資料

主催者であるまめこは、名刺作りを例に一連のフローを話してくれました。 まめこナイト。
後半は大分専門的な内容が入ってきて、結構難しかった。
使ったソフトはイラレとフォトショ。

ケースバイまめこ

名刺を作成する最初の流れはこんな感じ。 あくまでまめこの場合なので、こうしなければいけない、という物ではない。

  1. 原稿を考える(名前や各種アドレス、アイコンやIDなど)
  2. コンセプトを考える(好きな音楽のジャンルをテーマにする、とか)
  3. ラフを紙に書く(超簡単でOK。 ラクガキっぽいのを紙に書く)

ちなみに、スライドに載っていた原稿に、twitterIDはあったのにlivedoorIDが無かった。 きっと公開の時にはこっそり追加されているはず。

アイディアを膨らませる

コンセプトを元に連想や妄想を膨らませて、ビジュアル的なアイディアを出していく。
例えば音楽だったら、そのジャンルで使われる楽器や服装や色。

素材を探す

写真やフォントなど。 素材集や無料素材のサイトを探す。
素材サイトの場合、商用利用に制限がある場合が多いので注意。
(特にGIGAなんとかとかで紹介されている海外のサイトとか注意した方がいいと思います)

仕様について考える

色は1色、2色、4色があるが、名刺なら4色で。
サイズは91mm×55mm。
紙の種類はマットとかツヤツヤとかあるけど、それもデザインに盛り込むのはもうちょっと成長してからで。 最初は好みでOK。
ちなみに、変形名刺(細長い形とか)にすると印刷屋の料金が跳ね上がる。

まずは名刺の形の枠線を作る
  1. イラレで新規ファイルを作成し、サイズはミリメートル、色はCMYKを選択する
  2. 長方形ツールを選択し、画面をクリック
  3. 数値の入力欄が出るので、91×55で長方形を作成
  4. 長方形をカットしてペーストすると、画面の中央に置ける(作業しやすい)
  5. 四角を選択して、上部メニューのフィルタ→クリエイト→トリムマーク で、トンボを出す(四角を選択しないとダメ)
  6. このトンボ、実は正確ではない。それは、四角の線の中央を基準に表示してしまうから。 つまり、線と塗りを一度非表示にしてからトンボを出す必要がある
  7. そうすると、91×55の領域が分からないので、Ctrl+Rでルーラー(定規)を出して、そこからドラッグする事でガイド(基準線)を引く

ちなみにトンボとは紙を裁断する時の目安となるもの。 由来はそのまんまで、虫のトンボのように見える事から。 トンボは虫の動物(まめこ語録)。

また、ドブや断ち切りと呼ばれる空間を用意しておく。 現在の技術では数百枚を裁断していくとどうしてもズレが生じてしまうので、その誤差を埋める為の物。
サイズは内側が最低3mm、外側は3mm以上あればよい。

テキスト情報を流し込む

これで準備完了。 ここから実際に作っていく。
まずは用意した原稿を流し込む。 住所などのサブ情報は6ptがまめこの流儀。
文字数の関係で入りきらない場合は、改行して調整する。

名前は今回の作例では明朝体を選択。 漢字が分かりづらい場合には読み仮名を用意する。

まめこメソッド1:写真から素材作成
  1. 素材探しで見つけた写真素材を、フォトショップで開く
  2. 上部のメニューから、イメージ→モード→グレースケール→OK
  3. 上部のメニューから、イメージ→色調補正→トーンカーブ→「右上から左下にかかっている斜線を『√』の記号のようにドラッグで変形させる」
  4. 写真が黒い感じになった
  5. 上部のメニューから、選択範囲→色域選択→写真の黒い部分をクリック
  6. レイヤウィンド(大抵右下にある)の「パス」タブをクリックして、下部メニューの「選択範囲から作業用パスを作成」をクリック
  7. 左上のフローティングメニューから、パスコンポーネント選択ツール(下の方のの矢印のアイコン)を使って、写真の左上から右下まで選択
  8. それをコピーして、クリップボードに入った状態のまま、イラレにペーストする
  9. 塗りと線を指定すると、いい感じに仕上がる
  10. あとは回転させたり、素材同士をくっつけたり、コピーして反転させたり、拡大縮小したりでロゴっぽくするだけ
まめこメソッド2:Web2.0ぽい集中線
  1. 円系ツールで正円を書く
  2. 円を選択し、線のみにする
  3. 線の太さを300とかにする
  4. 線を破線にすると、Web2.0ぽい集中線になる
  5. 線の色を変えたり、位置を変えたり、破線の間隔を変えたりしていい感じにする
タイトルを作る

ロゴの画像要素の上に配置する文字の事。
フォントを選んでテキストを入力し、選択して右クリック。 コンテキストメニューから「アウトラインを作成」。
これでそのテキストは、テキストデータではなくパス(画像)として扱える。 逆にいえば、文字を打ち直す事はできなくなる。
(不安だったら、一度コピペして保険として残しておくといいよね)

パス(画像)になったので、1文字づつ回転させたり大きさや色を変えたり、シャドウを入れたりしていい感じにする。

詰め

これでロゴや名前、住所などのパーツができた。
詰めとして、これらをバランスよく配置して調整、細かいデザインを追加していく。

  • 罫線を引いて情報をグループ化する際には、罫線の上にワンポイントの要素を置いたりするとプロっぽい
  • 背景に色を敷く
  • ペンキを散らせた紙をスキャナで読み込んで、上記まめこメソッド1で背景画像を作り、配置する(これは使いまわせるので、アイディア次第でストックしておくといい感じかも)
  • ロゴにグラデを使って色味を出す
  • テキストの色を指定する
  • 空間が空いたら、何か入れて埋める(まめこは屋号のロゴを入れていた)
  • 全体的な位置の微調整は、モニタから遠ざかってチェック
裏面を作る

表面を全部コピーしてペーストする。
そこからいらない物を削除したり、色を変える。 空間が空いたら、何か文言とか入れる。
ロゴは表だけでいいので、Webサービスで使っているアイコンを入れたりしてもよい。

入稿の方法
  • データはCMYKで
  • テキストはアウトライン化する
  • 断ち切りは端まであるかどうか
  • 拡張子があるか

これらをチェックした上で、データとキャプチャ(印刷屋の人が見る確認用画像)を用意する。
表面と裏面は、それぞれ別のファイルにする。
CMYKのチェックは、全てを選択して上部メニューからフィルタ→カラー→CMYKに変換 で行う。
テキストをアウトライン化したら、もうテキストを編集できないので、別名で保存しておくとよい。
保存の際のバージョンは余り気にする必要は無い。 自分のバージョンに対応できる印刷屋を探すようにする。

なお、まめこオススメの印刷屋さんが資料に載っているはずなので、公開されたらチェックするといいと思います。

tips2種
  • とにかくたくさんのデザインを見る。 可能なデータ形式なら、パスを見る(つまりソース嫁、って事)
  • 文字数が多い場合、改行以外にも、文字の幅や高さを変える事でも対応できる。
    この手法は、フォントが持つデフォルトの特性も調整する事ができる(例えば、丸々ふっくらしたフォントの幅を狭めると、少しシャープに調整できる)。

Webサイトのあり方と考え方

色んなセミナーなどでも講演されているガクさん。 まめこの熱烈ラブコールに答えてトリを飾ってくれました。
ガクさんはデザイナーでは無く、また今回の内容もデザインとは少し離れた物でした。 しかし、主催まめこがその考え方に非常に共感する所があったようで、拝み倒されて(?)の講演となったようです。

まめこは過去に「人とのコミュニケーションもデザイン」と言っていました。
これは僕の主観なのですが、「デザインとは、目的や問題を解決するための手段」と考えるなら、こういったアプローチもまたアリかな、と思いました(プロダクトデザインで見かける考え方かも? 雑誌Penとか)。 参加者の意識とはズレがあったかもしれませんが。
その辺を念頭に置いて、このセッションのまとめを書きました。

WebとWebに関連する企業の歴史

2000年頃のWebは、リンクでサイト同士が繋がっている程度だった。
それが2003年、2004年と年を重ねていくに連れて、企業が戦略的にWebを使用するようになった。
現在は様々なサイトが繋がっているだけでなく、ユーザー同士も繋がっている(口コミの効果)。
また閲覧する為の媒体(ケータイとかPSPとか)も広がりを見せている。

昔は買い物に行くとしたら、消費者は小売店舗に出かけていた。 しかし、最近はネットを通して企業から直販で買う事も可能になっている。
つまり、昔は企業にとって顧客とはあくまで小売店舗であり、消費者は直接的にお金を落としてくれる存在では無かった。 最近はそれが変わってきている、という事。
(企業が消費者を「顧客」と呼ぶ場合、その意識がある。 「消費者」と呼ぶ場合には、そういった意識が低い。 または無いと考えられる)

One to Oneマーケティング

販売者と消費者が取引(やりとり)する場合、大切なのはマニュアル以外の部分である。
例として分かりやすいのは、地元の馴染みの八百屋や魚屋のイメージ。

  • 「いつもありがとうね! 今日はサービスしちゃうよ!」
  • 「お宅の息子さん、悪そうな連中とつるんでたよ? 大丈夫かい?」
  • 「今日は夕方から雨って言ってたから、早く帰った方がいいぜ」

こんな感じ。
そういった事を意識している仕事は他にもあって、新幹線パーサーやキャバクラ、コールセンターやメイドさん・執事などがそれにあたる。
共通するのは、1対多の接し方ではなく、1対1の接し方であるという事。
(この辺り、いわゆるホスピタリティにも通じる話かな、と思いました)

それをWebにあてはめてみると、PCの画面というのは、多くは一人で見る。
であるならば、WebにもOne to Oneマーケティングの方法が使えるのではないか。

One to Oneマーケティングで大切な事

キーワードとなるのは、4C。

  • 顧客価値
  • 対価
  • 利便性
  • コミュンケーション

簡単に言うとこう。

  • 価値ある存在か?
  • 価値に見合った対価か?
  • わかりやすい場所にあるか?
  • コミュニケーションは良好か?
Webデザインにあてはめて考える

例えば、プロダクトデザインでは美しさ、見易さ、扱いやすさの3つが重要としたら、Webデザインでは配色、配置、ユーザビリティの3つがそれにあたる。

tips:配色バランス

ベースカラー、サブカラー、アクセントカラーの割合は、70:25:5の割合が定番。
もし色を足したい場合には、最も多い割合を半分の35%にする。

tips:名刺を貰う時のマナー

名刺を貰ったら、相手より一秒でも早く上に持ち上げる。

この辺りから、上司にご馳走してもらった時のマナーやメールの書き方を間違うと職を失いかねないなど、マナーについての話になったんですが、これはさすがに蛇足だったかな、と感じました。
なんとなく、(マナーの話をするのは)ガクさんの本意では無いような気もしました。 あくまで予想ですが。

まとめ
  • 情報は整理して、誰に伝えたいかを考える
  • One to Oneコミュニケーションでは、相手の喜ぶ姿を考える
    例えばソースコードを書く職では、読みやすいコードを心がけるなどにも繋げられる
  • マナーは大事

総括

デザインって、なんとなく「才能」とか「神が降りてきた」とか、天性の物が必要とされるイメージがありますけど、必ずしもそうでは無いんですよね。
理屈を学んで経験を積めば、ある程度のデザインはできるんだと思います。 ビジュアルデザインって言うか、絵を描いたりはまた違いますけど。

今回のセッションでも、「4つの原則」や「ベジェ曲線とは」など、理論的な説明が多くて解りやすかったです。
ビジュアル的な要素では「ごにょごにょして」という説明もありましたけどw まあそこは感性に基づく部分なのかな。

今回の勉強会を通して、デザインに関する興味が深まりました。
IAとかUIとかは(色の使い方とかに比べて)マークアッパーにも近い分野だと思うので、そういった方面で積極的に勉強したいです。

2007年09月11日

nowaがニコニコ動画のレビューに対応しました!

見出しの通り、nowaがニコニコ動画のレビューに対応しました!

nowaって何? という人はガイドを見てみるといいと思います。
「そんなの面倒><」という人に簡単な説明をすると、livedoorの新しいBlogです。

フレンド登録ができたりチャットのような物があったりと、普通のBlogよりもユーザー同士の交流がしやすいようになっています。
そんな訳で色んな使い方ができるんですけど、僕はWeb関連や職場関連の雑記や、いろんなレビューを書いています。 あ、フレンド熱烈募集中です。

ニコニコ動画が対応した事で、溢れてしまったマイリストを整理するもよし、他の人がどんな動画でニコニコしてるのかを見るもよし、ひたすらお気に入りを紹介するもよしです。
あ、現在は、記事投稿画面の『レビューを挿入』にレビューしたいニコニコ動画のURLを入力する形式になっていますので、ご注意ください。

あと、最初の頃に登録して、最近使ってない人にも是非、また覗いてみてほしいです。 細かい部分の使い勝手とか、皆さんのご指摘を受けて色々変わっていますので。

タグ検索も実装されましたし、nowaでよりいっそう楽しいニコニコライフを送っててみてはどうでしょうか。
以上告知でした。

2007年09月18日

スタイルシートデザインのネタ帳 に、いくつか記事を書きました

impress Direct スタイルシートデザインのネタ帳

少し前に発売になったMdNの書籍、スタイルシートデザインのネタ帳に、いくつか記事を書きました。
「ネタ帳」という名前から連想できるかもしれませんが、Tips系の本になっています。

この本、細かい書き方は各執筆者に任されていて、デザイン部分を多めに解説している人もいれば、コーディング部分に重きを置いている人もいます(もちろんテーマにもよるんでしょうけど)。
僕はネタ部分を解説する他に、『一つのページを作りあげるフローを解説』という形式を意識してみました。 大抵は、この本に書いているような流れでコーディングしています(「最後の調整」をどの割合で残すのかは未だに迷いますが)。

現在は平積みしてくれている本屋さんも多いようなので、見つけやすいと思います。
もし見かけたら、ちょっと読んでみてください(そしてよかったら買ってくだしあ)。

蛇足ですが、サンプル中のテキストは気にしちゃだめです。 だめったらだめ(と気になるような事を書いて購買意欲を煽るメソッド)

2007年09月21日

マルチモニタ環境を晒してみる

livedoor開発Blog_さん(アンダーバーさん)がWindows でマルチモニタという記事を書いていたので便乗しようと思います! 僕もマルチモニタ大好きです。

写真で見るとこんな感じです。_さんと比べると、モニタがバラバラなのが分かります。
ほぼ、持っている物だけで作ったので、これは仕方ないところです。

左の3つがメインマシンで、右のノートがサブマシンです。 Synergyで繋げています。

マークアッパー向け? バーチャルデスクトップ

主な作業は左の3つのモニタで行っているのですが、コーディングの時は7つぐらいのブラウザを立ち上げているので、とてもモニタが足りません。

ウィンド同士を重ねたり、横幅を小さくすればやりくりする事はできます。 でも、それだと作業効率、精神効率に響きますよね。
そんな時は、バーチャルデスクトップを使ってみてはどうでしょうか。

僕はVirtual Dimensionというソフトを使っています。
海外のソフトなんですが、いくらでも(メモリの許す限り?)デスクトップの数を増やせたり、ショートカットキーが使えたり、マルチモニタで不具合が出にくかったりして、気に入っています(国内ソフトではVDが有名ですけど、どうやら僕は相性が悪いようで・・・すぐウィンドウがどこかに飛んでしまいます)。

これで4枚のデスクトップを作成して、

  1. 作業用Fx・エディタ・メーラー・IRC・IM
  2. IE5.5・IE6・IE7
  3. Opera・Win Safari
  4. NN7・Poderosa・各種フォルダ

と、こんな感じで使い分けています。
場合によっては、ブラウジング用Fxがどこかに入ります。

第5のモニター 書類立て

サブマシンの更に右に置いてあるのが、この書類立てです。 紙の資料を見ながら作業をする場合に効果を発揮します。
あと、雑誌のサンプルコードを書き写す時なんかにも、手で押さえる必要が無いので便利です。

2007年09月22日

2008年はグリモン&ユーザーCSSバトンが流行る!・・・・・・かもしれない

2007年09月23日

勉強会のまとめ方を公開するよ!

おかげさまで勉強会のまとめ記事が人気です。
知り合いからもまとめ方を知りたいと言われたので、hamashunのやり方を書いてみます。
ノートPCの使用が前提になっています(ある程度のタイプ速度が出せないと手書きの方がいいかも)。

勉強会当日のメモを取る時

多少の誤字は気にしない

「くだしあ」とか「でうs」とか、その程度の誤字は無視します。 あくまでメモなので、読み返した時に記憶を蘇らせるキーにする事が重要です。
あんまりにもひどい誤字は、スピーカーさんの喋りが一息ついた時に直します。 喋っている間はタイプし続けた方がいいと思います。

見出しを作る

スピーカーさんの話し方やスライドの雰囲気から察して、いわゆる大見出し的な発言は目立つようにします。 頭に■とか付けるだけでも大分違います。
僕が使っているez-htmlというエディタは、txtファイルでも色指定を設定できるので、視覚的に区別しやすいです。

example
■メモの取り方その1
◎メモの取り方その1
■□メモの取り方その1□■
インデントを使う

インデント無しで書くのは、中見出し的な言葉にします。 その見出しについての内容はインデントを一つ入れて書きます。
その内容から更に派生した内容がある場合には、更にインデントを入れます。 その繰り返しです。
と、文字で書いても解りづらいと思いますので、例をどうぞ。

example
■□マークアップのフロー□■

素のテキストをマークアップする
 その文書で最もレベルの高い見出しをh1で
  トップページならタイトル
  例えばBlogの個別記事ページなら記事タイトル
 その他もマークアップしていく
 divはまだ使わない
  今はデザインの事は考えない

divでラップする
 ただし文書的に不自然にならないように
  デザインを優先して、見出しと段落を分離とかダメじゃね?
スピーカー以外の言葉に目印を付ける

セッションの最中に参加者から突っ込みが入ったり、自分なりの解釈をメモする事があると思います。
後になって見返してからそれがスピーカーさんの発言では無い事が解るように、行頭に目印を付けておきます。
スピーカーさんの補足的発言に使ってもいいと思います。
今回は、#をスピーカーの補足、$を参加者の突っ込み、%を自分が思った事、としました。

example
■□マークアップのフロー□■

素のテキストをマークアップする
 その文書で最もレベルの高い見出しをh1で
  トップページならタイトル
  例えばBlogの個別記事ページなら記事タイトル
  %SEO効果もありそうやね
 その他もマークアップしていく
 divはまだ使わない
  今はデザインの事は考えない
  #考えると文書中心のマークアップに雑念が入るw
  %雑念てw

divでラップする
 ただし文書的に不自然にならないように
  デザインを優先して、見出しと段落を分離とかダメじゃね?
  $divで分離されていても、同じclassを付ければよいのでは?(○○さん
  #NGでは無いけど一般的では無いと思う
  %classよりも更にdivでラップするとか。 いやそれもうざいか

ただ、これは意識しててもいざタイピングしていると混同しがちなので、『スピーカーの発言とそれ以外』を最低限分けられればいいと思います。

家に帰ってからまとめる時

対象を定める

まとめ記事の対象を決めます。
完全に自分用、勉強会に参加した人向け、勉強会に参加してない人にも解るように、の3段階があると思います。 当然、後になる程作業的には大変になります。

僕は『勉強会に参加した人向け』で書く事が多いです。 なので、ここでは主にその解説です。
参加していない人にも解りやすく書くには、ソースや図版をふんだんに盛り込む必要があるのでは。

構成をまとめる

スピーカーさんも人間なので、スライドが進んでから「あ、まだ喋ってない事があった」とページを戻して喋る事があります。
その間にメモが進んでしまっていると順番がゴチャゴチャになってしまうので、それを整理して順番を正しくします。

内容の割合

記事中に自分の意見はあまり混ぜません。 内容を中心に書いていきます。
自分の文章は補足的に持ちいる以外は、最後か最初に書きます。 逐一感想を書いていくと、かなり文章量が増えてしまって読む方も大変です。

できるだけ早くまとめる

なんだかんだ言っても、これが一番大事だと思います。 時間が経てば経つほど、記憶は薄れていきますよね。
打ち上げなどで家に着くのが深夜という事もあると思いますが、メモをざっと読み返しておくだけでも理解度が変わってくると思います。

公開した後の事

記事を公開した後に、スピーカーさんが資料を公開する事はよくあります。
そうすると資料へのリンクを追加すると思うんですが、記事の冒頭にその旨を追記しておくと、フィードを読んでいる人に優しいです。

ご注意

サンプル中のテキストは、あくまでサンプルです。

おまけ

先日のデザイン勉強会の時のメモを公開します。 資料を公開されていないガクさんのセッション部分は削除しましたが、その他の部分は全てそのままです。
見て貰うと分かるんですけど、ここまで偉そうにアレコレ語ってるわりに実際のメモはかなり乱雑です。 ま、まあ、ヘタに形式を守ろうとして進行に付いていけないよりはいいと思うんです。


Blog Search
Search
Recent Entry
Category
Monthly Archive