スタッフブログ

menu

【デザインのツボ】描画モードは再現できない！

2018年11月13日

コーダーの輿水です。
【デザインのツボ】第4回！
あっという間に12月がすぐそこに･･･。そしてブログの担当も回ってきてしまう･･･。

気を取り直して今回は、かっこいいデザインを作るのに一役買っている、描画モード(ブレンドモード)についてです。

■今回のテーマ

イイ感じのデザインを作るのにとっても大事なのはわかるんですが、この描画モード、設定したデザインを渡されても“実際のサイトでは再現できない(場合も多い)”んです！

■どういうこと？

デザインをしている方にはお馴染みかと思いますが、描画モードというのはPhotoshopなどの画像編集ソフトで複数のレイヤーを合成したように見せることができることができるオプションです。
例として、上の図の「【デザイン】」内にある青い枠組みには描画モードが適用されていて、背景の毛糸が透けているように見えています。CSSで簡単に実現できる半透明化とはどう違うのか？ということで半透明化に切り替えてみると･･･

こうなります。いやー見事に別物です(笑)。でも確かに同じ図形を使用していますし、枠組み以外のパーツは何も変更していません。
ということは、描画モードをサイト上で再現するには画像として切り出しておかないといけない、ということなんです(※)。

※一応CSS3で描画モードが追加されたのですが、まだまだブラウザの対応が追いついておらず、使用できない状況です(2018年11月現在)。

■何が困るの？

もう一度記事冒頭の図を見てみてください。デザイン中には「ここに任意のテキストが入ります。」。そしてご丁寧にも注釈に、「テキストはダミーです。～」との記述が･･･。つまり、青い枠組みは実際のテキスト次第で伸び縮みする可能性がある、ということになります。
もう一度繰り返しますが、描画モードを使った箇所は画像として切り出しておかないといけません。もし描画モードが使われていても、画像として切り出せるパーツなら対応可能です。しかし、画面幅を変える最中に背景とバラバラに動いたり、記事冒頭の図のように中身に合わせて伸縮する、となると、デザインを再現することができなくなってしまうんです。

CSS3の登場で、CSSだけで再現することができるデザインは格段に増えました。しかし今でもCSSでは対応できず、コーダーがあの手この手で四苦八苦してそれっぽく見せている(そしてお客様が気付くかヒヤヒヤしている)部分もあり、残念ながら上記のようにお手上げなデザインもあるのが現実です。
WEB系のデザインを多く手掛けられるデザイナーさんは、是非コーディングで再現できないデザイン、というものがあることを知っていただければと思います。

音楽会

2018年11月6日

実は音痴なフロントの武藤です(キリッ)
何故か私が歌うと爆笑ということが数回あり自覚しました(笑)
反応は人それぞれですが…
ヘンに引いたり、気を遣われるよりかは
笑ったり、ツッコんでもらえる方が嬉しいです！

開き直ってからは少しマシになったかと思う今日この頃、
１１月３日は長女の小学校の音楽会でした。
全学年のプログラムを楽しく見ることができました。
長女は結構ノリノリで歌って演奏していて感心しました。
長女には音痴の血は引き継がれていません(ホッ)

運動会と違って写真＆ヒデオ撮影禁止ということもあり
撮影のプレッシャーがない分楽しめたような気がします。

私は毎年遅めに会場に入るので立ち見なのですが、
来年は次女も小学生になるし、
一番前で座って見れたらいいなぁと思ってました。
なので、６年生にお子さんがいて2列目に座れたという方に
何時から並んだのか聞いたところ…
おじいちゃんが朝の４時から並んだとか！！
それでも前から１１番目だったようです。
なら１番目の人は何時か並んだのか？
気になりますよね？
聞きましたよー。

なんと、前日の夜１０時。

スゴすぎる…
ちょっと舐めてましたね。
まさかそこまでとはビックリでした。

さて、来年はどうしたものかと考え中です。

名古屋の朝はこれで決まり！

2018年10月30日

みなさんこんにちは！
スタッフのサオリです。

先日名古屋に出張に行って来ました。
日常から解放され気分が浮かれ気味だったのでしょうか。
名古屋で口にした全て（お水までも）美味しく感じました。
｡・ﾟ+ *.｡ﾟ+(o’∀’o)+..｡* ・+ﾟ’

中でも朝食でいただいたパン。。。ではなく、
パンに塗るアレが超絶美味しかった！

マーガリンとイチゴジャムはよくある取り合わせなのですが、
さすが名古屋です！
置いてあったのはマーガリンとあんこ！！！

朝からほっこり美味しい朝食をいただきました。

あの感動をもう一度と、
商品を探してみましたが、
キューピーさんの業務用なので販売はしておらず。。。

https://www.kewpie.co.jp/prouse/products/detail.php?p_cd=64736

大好きな虎屋のあんペーストの画像を貼り付けておきます（^^;）

マイブームは納豆と卵かけご飯

2018年10月23日

月に1度か2度しかまともな料理を作らない吉岡です。

料理をするのが苦手というわけではないのですが、
後片付けがとても苦手です。

食洗機があるのにもかかわらず…。

そんな私は実家暮らしなのですが、
1人でご飯を食べることが多いです。
両親はバドミントンの練習に行き家を空けるので…。(母は週3～4日、父は週5日)

1人でご飯を食べるときに最近多いメニューが

・卵かけご飯
・納豆

です。

タイトルのとおり、マイブームなんです。
卵かけご飯は元々嫌いだったのですが、ある居酒屋さんの卵かけご飯を食べてみたときに
「なんて美味しいんだ！！」と。
それ以来、卵かけご飯にどハマりしました。

ハマりすぎて、
母親が少し高い卵かけご飯にかけるだし醤油を買ってきてくれました。
これがまた美味しいんです…。

そして納豆。
嫌いといわれる方も多いと思います。
ネバネバ…臭い…。

納豆好きからすると何も気にならないんですけどね。
小さい頃から納豆は大好きです。
口の周りを納豆のネバネバまみれにしていた記憶もあります。

納豆だけを食べるのももちろん美味しいのですが、
個人的に好きな食べ方は
納豆にキムチとごま油を入れる食べ方です。

納豆 + キムチ = 健康にいい
納豆 + ごま油 = ダイエットになる

ということを知っており、
「一緒にしてみるとどうやろ」と思ったのがきっかけです。
案の定美味しい。

ぜひ納豆好きな方には食べていただきたいです。

卵かけご飯や納豆の
美味しい食べ方をご存知の方がいらっしゃいましたら
ぜひ共有してください！！

衝撃的

2018年10月17日

こんにちわ。推しアイドルが卒業発表して虚無のサワダです。

先日、推しアイドルグループのライブDVDが発売されまして、

センターの子のとんでもない表現力に、いい意味でドン引きしました。
現場にいた人たちがやばすぎてやばいしか言えてなかった意味がわかりました。

目が、視線が、もう何を見ているのかわからない、
ファンでも自分自身でもない何かを見ている彼女を私たちはアイドルと呼んでいいのだろうか
そう思うくらいダークサイドの香りがするパフォーマンスで

センターの子、芸能人になって数年目ですよこれからこの子どうなっちまうんだよ、、、

グループ名は出さずともわかるはずです。DVD買ってください。

【デザインのツボ】小数pxは使わない！

2018年10月9日

コーダーの輿水です。
【デザインのツボ】第3回！
今回は、前回でちらっと出た小数点pxについてです。

■今回のテーマ

デザインを作成する上で、“できるだけ小数pxは使わないで”ほしいんです。

■どういうこと？

デザイン上で小数px使えるじゃん！ちょっと調整したいなーってときに便利！と思っているデザイナーの方もいらっしゃるかと思います。
実際かなりの確立でデザインに小数pxが含まれているので、そもそも意識せずにデザインしていたら使ってた、という場合も多いのかもしれません。

しかししかし、なんとコーディングでちゃんと小数pxを指定しても、実際の表示では小数部分が無視されるということが起こってしまうのです！
これは、各ブラウザによって小数を反映する/無視する、反映する場合も小数点以下○桁まで反映する、切り捨てる/切り上げる/四捨五入する、という仕様がバラバラになっているためです。
コーダーが頑張っても、残念ながらブラウザそれぞれの仕様を合わせることはできません。

■何が困るの？

例えば図形や余白の場合、デザイン上で小数px指定になっていると実際は1px大きい/小さいということが発生します。
すると、端にないはずの余白ができてしまったり、入りきるはずの行で段落ちしてしまったり、という結果になってしまいます。

フォントサイズの場合、例えば「20.2px」という指定なら、小数なしでも「20px」と誤差が0.2pxなので、あまり気にならないかもしれません。
でも「20.8px」という指定だったら･･･？小数なしで切り捨てだと「20px」と、誤差は0.8px。ほぼ1px分の差になってしまいます。見た目にもデザインとの差が気になってくるかもしれません。
かといって「21px」に勝手にしてしまっていいものか･･･とまたまたコーダーは小さな葛藤をするわけです。

折角綺麗にデザインしてもその内容が再現されないとがっかりだと思いますが、コーダーだって、きっちり再現してやったぜイエイ！という気持ち良さを目指してコーディングしていたりします(･･･のはず)。
お互いにいい仕事したな！という達成感目指して、こんなブラウザの事情も入れたデザインをしていただけると嬉しいです。