2013年11月15日金曜日

いいものとはなんぞや?という話

このエントリーをはてなブックマークに追加
(コチラ,特に結論のないダラダラとした文章になります)

何かを作るのならば,折角なら,いいものを生み出したいなと皆思うはず。

自分の中で'いいもの'とは何か?と考えた時,こんな分類になる。
・役に立つもの
・美しいもの
・面白いもの

'役に立つ'とは何か?
この定義は簡単で,「それがなかったら困るもの」だ。
自動車は役に立つものであり,自動車がなくなったら重い荷物を遠くに運ぶことはできなくなってしまう。

'美しい'とは何か?
この定義は客観的になもので曖昧。なぜバッハのバイオリンのための無伴奏曲はあんなにも美しいのか?美しさはある程度までは理論やルールで説明することは出来る(もちろん全てを説明することは不可能だけど)。
少なくとも言えることは,美しくないものはある程度の共通項があるので,その部分を予め省くことが出来るのかな。

最後に,'面白い'とは何か?
この定義はほぼない。面白さは捉え所がない。人によって捉え方は多種多様で,同じ人でも状況によって面白さの感じ方が変わってしまう。まさに「おもしろきこともなき世をおもしろく。すみなしものは心なりけり」だ。心次第。
しかも,面白さには'飽き'というものがある。面白さの一つである'笑い'を作り出すお笑い芸人は,出てきては消えてしまう。
どうすれば面白いものを作れるのか?ヒューリスティックな手法はあるのか?それとも常にゼロから作るべきなのか?謎。


と,こんなことをズルズルと考えていたら,作家の井上ひさしの言葉を見つけた。
"難しいことを易しく、易しいことを深く、深いことを面白く"

'役に立つ'ものを作るということは,'難しいことを易しく'するということ。
'美しい'ものを作るということは,'易しいことを深く'するということ。
そして行き着く先は,'面白さ'

2013年10月21日月曜日

米一揆:ニコニコ動画風にサイトのコメントを表示するChrome拡張

このエントリーをはてなブックマークに追加


 
今見ているサイトの米(コメント)をニコニコ動画風に表示するChrome拡張「米一揆」を作成しました。

▼インストール
Chrome Extension

▼使い方
拡張機能をインストールすると ComeIkki.ico アイコンが追加されます。
アイコンをクリックするとポップアップ画面が立ち上がり,コメントを入力することで,そのサイトに対してコメントを残せます。 また,ON/OFFチェックボックスにより,起動と停止を選べます。(※チェック後,ページを更新する必要があります)



2013年9月19日木曜日

デザイナーとエンジニア間の溝をなくすためにできること

このエントリーをはてなブックマークに追加
定義&前提
  • デザイナーはイラレやフォトショを触る人,エンジニアはマークアップする人 
  • デザイナーとエンジニアはリモート作業
おしながき
  • はじめに
  • バージョン管理例
  • デザインフレームワーク例


はじめに
 デザイナーが作成したデザインをエンジニアがマークアップする際には下記のような問題が起こります。
  1. デザインの修正箇所がエンジニアに伝わららず,マークアップされない
  2. 各種プロパティ(カラー,サイズ,フォント,シャドウ)がわからない
 1の問題は,バージョン管理システムを導入することで,解決できます。しかし,デザイナーがgitコマンドを使うことは困難であり,また,ビジュアル的な修正は,コミットメッセージとして言語化しにくいという問題があります。ここでは,いくつかのバージョン管理の例を導入難易度レベル順に紹介します。
 2の問題は,エンジニアがPhotoshopやIllustratorを立ち上げ,各種プロパティをチェックすることは,大きな負荷になるためです。ここでは,デザインフレームワークをいくつか紹介します。


バージョン管理例
[Dropbox] 導入難易度:★☆☆
何人かのデザイナーにヒアリング調査したところ,Dropboxを使ってバージョン管理をしている方が多数いました。何よりも簡単で自動的にバージョンを管理してくれるからだと思います。ただ,バージョン管理というよりはバックアップのついでと言ったほうが近いかもしれません。バージョン管理のためのUIは優れておらず,前のバージョンとの比較はできません。

[変更箇所をテキストや画像で出力] 導入難易度:★☆☆
変更箇所をテキストで明記したり,変更箇所を画像で出力し,注釈をつけることで,エンジニアに知らせます。導入難易度は低く,確実に修正箇所を指摘する事ができますが,細かい修正毎に作成するのは手間がかかります。

[Pixelapse] 導入難易度:★★☆
Pixelapseはデザイナーのためのバージョン管理システムです。デザインに特化したDropboxといった印象です。保存する度に自動的に新しいバージョンを作ります。前のバージョンとの比較はできません。

 


[layervault] 導入難易度:★★☆
Layervaultは,Pixelapseと似たツールです。様々な機能がWebページ上で提供されており,16進数で表示されるカラーピッカーやバージョンに対してのコメント機能,また選択した範囲が前のバージョンと比べどれだけ修正されたかを確認できます。




[GitHubで差分確認] 導入難易度:★★★
GitHubでは,画像ファイルの差分を表示することが出来ます。そこで,デザイナーが作業後に成果物を画像として出力し,GitHubにあげることで,エンジニアは差分を簡単に確認できます。ただ,デザイナーがgitを理解し,GitHubを使いこなすことは難しいという導入上の問題点があります。



デザインフレームワーク例
[UIパーツのみ集めたpsdファイルの作成]
このサイトにあるようにUIパーツのみを切り出した状態で一枚のpsdにまとめるとエンジニアにもUIパーツを扱い易く,デザイナーも自分のデザインに統一感があるかをチェックできます。画像のスライスはPhotoshopのGenerator機能を使うことで自動的に行うことが出来ます。



[デザインマニュアル]
デザイナーがデザインマニュアルを作成し,エンジニアが確認しながら作成することで,レイアウト調整のミスを防ぐことができます。具体的には下記のようなプロパティを明示します。

  • マージンとパディング
  • 通常フォントの定義
  • イレギュラーなフォントの定義とどのような場合にそれを使うか
  • カラーリングルール

[デフォルトスタイルの作成]
Cookpadでは,独自のデザインフレームワークとその上に定義してあるデフォルトのスタイルを使うことで,デザインの統一やデザイナーとエンジニアの意思疎通を図っています。詳しくはコチラの資料をご覧ください。


おまけ
便利なツールをいくつか紹介します。
CSS Hat: Photoshopで作成中のオブジェクトをCSSとして出力します
CSS 3.0 Maker: CSSのジェネレータ
CSS Border Radius Generator: CSSの角丸ジェネレータ
CSS Button Generator: CSSのボタンジェネレータ
SPECCTR: FireworksやIllustratorデータのオブジェクトを選択することで,そのサイズや別のオブジェクトとのマージン,フォントなどのプロパティを出力します