Skip to content →

XXXXXユーザーができないと思っている12の機能

なんだかFireworksの新規開発が終了とかそういう話題でコレ系の記事が増えてきているみたいなので、ちょっと便乗してみることにしました。タイトルと以下の項目は、見かけた記事を参考にさせていただいています。


01. ピクセルに最適化されていない

高精細なディスプレイが出てきて「1px」という単位もなかなか怪しいものになって、「その1pxは本当に1pxなのか?」ってな話の昨今ですが、まぁ一応のところはピクセルというところで幅も高さも線幅も移動も修正できるCSSは便利ですね。

Designing (and converting) for multiple mobile densities

02. シンボルがない

CSSプリプロセッサ各種にある「mixin」の機能を使えば、あらかじめスタイルを定義しておいて複数の要素に一括で適用するといったことができますね。もちろん一括で修正するなら、元の記述を変えるだけでOK。

03. オブジェクトを直接選択できない

HTMLの要素にclass属性などを付けておけば、その要素はCSSから直接操作することができますね。

04. シェイプの大きさや位置を数値で指定できない

大きさや位置はCSSを使えば数値で指定することになりますね。複数の要素を同時にどうにかするなら、CSSプリプロセッサの変数を使うなり前述のmixinを使えば簡単です。

05. 角丸の大きさを後から変更できない

mixinって便利ですね。ここでも使えます。

.border-radius(@size:4px){border-radius: @size}

みたいなmixin作っておけば、デフォルトの値(4px)を使いたい時はそのまま「.border-radius();」で、値を変えたかったら「.border-radius(2px);」みたいにすればいいですもんね(LESSの場合)。

06. 「線」が使えない

borderというプロパティがあります。素晴らしい。

07. 色やフォントの検索・置換ができない

検索・置換はお手のもの。何ならCSSプリプロセッサの変数で定義しておけば、それを修正するだけで終了です。

08. 複雑なパスの操作ができない

複雑なパスは、SVGやCanvasの出番ですね。実体はただのコードですからそのまま修正もできます。Retinaみたいな高精細なディスプレイでも、拡大縮小しても綺麗に見える特典付きです。

手書きは嫌だというのなら、SVGはSketchから書き出すとオブジェクトサイズにできるし、AiからCanvasに変えるときはこれとかどうでしょう?

MIX Online:Ai to Canvas Plug-In

09. カスタムアンチエイリアスがない

Webって見る側の環境に左右されるものですから、それは見る側の環境次第でいいんじゃないでしょうか。少なくともMacでは綺麗に見えますよ。

10. レイヤースタイルのコピーができない

何度も何度も書いてますが、mixinとかでまとめておけばいつでも使いたい時に使えます。コピペは得意です。

11. スライスがめんどくさい

スライスという考え方はそろそろやめても良い頃かと思うのですがいかがでしょうか。ピクセルパーフェクトの完璧なカンプを作って、それをまたHTML/CSSで再生産するって非効率的だと思いませんか?

12. ページ機能やステート機能がない

HTMLを複数作るとページは複製できますね。モックアップなどで複数パターンを考えるのであれば、HTMLテンプレートエンジンとかをうまく使えばコンテンツはそのままに複数のパターンを作って試してみる、共用のテンプレートを使い回すといったことは簡単にできますよ。

カンプが必要ならこの辺をうまく使えば、作りながら各種デバイスサイズのスクリーンショットが撮れますよ。

CasperJS, a navigation scripting and testing utility for PhantomJS

あ、あと単純なステートなら「:hover」ってのがあるので大丈夫です。


ま、そんなとこですね(笑)。

もしよろしければ先月講演の際に使用したこちらのスライド、あと5年前に書かれた37 SignalsのJason Friedのこの記事でも読んでみてください。

Web Design Process for The Future

Why we skip Photoshop by Jason Fried of 37signals

Published in articles