デザインを作ってみよう、そうしよう

新しいLP作成ツールのためにデザイナーさんにアドバイスを沢山ももらっているところ。プログラムによる動作に対応することとデザインのしやすさというバランスをとらないといけない。

JuralMin / Pixabay

JuralMin / Pixabay

今後たくさんのデザイナーさんに依頼をすることになるので、現在は「スムーズに依頼するため」という部分も含めて打ち合わせを続けているところ。

デザイン部分はそれはプロの方にお願いするんだけど、依頼手順について考えていたところ「やっぱり自分で体験しなければ」という思いに至った。頭のなかで「よろしくぅ」なんていうよりも「ここは大変ですけどよろしくぅ」のほうがいいよね。

依頼する側が簡単だと思っていることが実は大変だったり、その逆だったり。そのためにはやっぱり「自分で体験する」ということが大切だと思うのだ。飲食店で全国に支店を出しているような会社のトップも「現場の声」を聞くために、お客として訪問したり、現場にスタッフとして入ったりすることがある。

そういう「現場を知る」というのはとっても大切なこと。現場を知らないトップダウンの命令ほど悲惨なことはない。言ってみれば現場にいるスタッフは戦場の最前線で戦っているのだ。そんな命がけの戦いの場を知らずにトップが「んじゃ、これやってみようか?」なんてノリでやられたら溜まったものではない。でも実際にはそういうこと結構あるんだよね。

さて、さっそく「参考にするLP」を決めて、それをパーツ化することに着手をする。思った以上にサクサクと進んでいく。こりゃ快適だわい。

デザイナーさんからCSSのセレクターを[data-hogehoge=”hohoho”]という形式を提案されたんだけど、これが実に分かりやすい。もともとはシステム処理用にコード上に配置したものだけど、デザインするためにも活躍してくれているのだ。いいねー。

ところが、思わぬところで躓く。<button>というタグのデザインをしようとしたら、どうしてもそれが反映されない。ひたすらCSSを見直したり、HTML側も見直したけど原因がわからない。セレクター部分を書き直してみたり、上に移動させたり、いろいろ実験したけどうまくいかない。本当に絶叫したくなるほど原因がわからない。ここだけで3時間以上悩み続けた。

で、原因は何だったかというと…どうやらタグの中の半角スペースと思われたものが制御コードになっていたようだ(全角スペースではなかった)。区切りとしての半角スペースではない文字があったために正しく判別できなかったというわけ。モニタ上では「半角スペースに見える」ので、何回見直しても気が付かないわけだ!

そもそもそんな制御コードは手入力しようとしても入れられるものではない。何かの拍子に入ったのだろう。adobeのDreamweaverを使っているけど、これだけ大型のアプリとなると何かの拍子に変なことが起きたりするので、それが原因かもしれない。

いや、本当に疲れた。ほとほと疲れた。順調に進む3時間と、まったく進展しない3時間はぜんぜん違う。疲労困憊という言葉がぴったりな状態だった。

そんなこんなでトラブルを越えたけど、次の試練がやってきた。それは文字列を表示する部分の横にワンポイントのデザインを追加したパーツを作る時。ずーーーーと前にテストでは実現していたので簡単にできると思ったら、結構ハマった。完全に忘れている。

いじればいじるほど深みにハマっていく。あぁなんてこったい。こんなことじゃデザイナーさんにやりかたをつたえることなんてできないじゃないか。しっかりと体系化しないといけないね。くそー。

ということで夜中3時に突入して限界になってきたので本日は終了。明日は打ち合わせなのでそこであれこれと議論になるだろう。


PAGE TOP