menu

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

2018年11月13日

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

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

■今回のテーマ

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

■どういうこと?

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

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

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

■何が困るの?

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

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

音楽会

2018年11月6日

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

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

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

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

なんと、前日の夜10時。

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

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

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

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」に勝手にしてしまっていいものか・・・とまたまたコーダーは小さな葛藤をするわけです。

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

平日の運動会

2018年10月3日

期間限定カルビーのア・ラ・ポテト。
今年も既に販売されていますね!
スーパーの売り場などで見掛けると今年も秋が来た!
と毎年小躍りしてしまうフロントの武藤です。
とくにじゃがバター味が好きです(^o^)

そして秋と言えば運動会!
昨日は長女の小学校の運動会でした。
今年は天候に恵まれず予定がずれて平日開催となりました。

主人は仕事、次女はこども園。
なので私ひとりで観に行きました。

しかも平日開催なので児童たちは給食です。
これは結構楽できました。

私は一応、水筒と軽食と敷物を持参しましたが、
予想以上に家族連れが多く
そんな中ひとりピクニック状態になる勇気はなかったので
自宅へ帰って食べました(笑)
もちろん私と同じ一時帰宅組も沢山いました。

もうひとつ私ひとりで困ったことと言えば…
毎年、ビデオ(動画)担当は主人。
デジカメ(静画)担当は私だったので
両方で記録に残せないのが残念でした。
しかも夜には主人からのビデオ撮影のダメ出し(T T)

そんなこんなでいつもと勝手が違う運動会でしたが、
運動会自体はとても盛り上がって楽しかったです。
ダンス、リレー、大玉転がし、組体操、騎馬戦…
ドラマティックな展開が繰り広げられて
感動したり、興奮したりで、観ていて面白かったです!

因みに大玉がビニール製のものに変わっていたのに時代を感じました(笑)
めっちゃ弾むのでコントロールが難しそうですね。

あと最近は運動会などの写真をSNSのアップして
そこに含まれる個人情報などでトラブルも多いとか…
長女の学校からもSNSへのアップロード禁止とありました。

そこで気になってSNSで「運動会」を検索したら…
皆さん、上手に撮れた写真を載せてますね!
しっかり情報を伏せて載せてる方も多いですが、
個人情報ダダ漏れの写真も沢山ありました(汗)
学校名の入ったテントをバックに
体操服の名札もバッチリな写真など…(ひぃ~)

うーーーん、悪用されないと良いのですが
自分自身も気をつけていきたいと思います!

価格改定のお知らせ|平成30年10月1日(月)

2018年10月1日

拝啓 時下ますますご清栄のこととお慶び申し上げます。
平素は格別のお引き立てを賜り、厚く御礼申し上げます。

さて、このたび弊社では平成30年10月1日(月)より、サービス価格を改定させていただくことになりました。
詳しい料金については、下記「制作料金」ページをご覧になってください。

▼制作料金

コーディング料金・費用

敬具

秋はBBQの季節です。

2018年9月25日

秋の気配に少しセンチメンタルなアラフィフ里織です。

毎年この時期恒例のBBQに参加しました。

関西デジタルコンテンツ事業協同組合のイベントで、
この場所でしか会えない方やそのお子さんなども集まり。
20人規模の大所帯のBBQです。

今回は、大阪リゾート ホテル・ロッジ舞洲が運営する、
森とリルのBBQフィールドにお邪魔しました。

サンセットタイムの美しい海を眺めながらの素敵なひと時。

暑さも和らいだこの時期はBBQがおすすめ。
気の置けない仲間との時間を楽しんでみませんか。

森とリルのBBQフィールド
https://www.lodge-maishima.com/bbq

〒 554-0042
大阪市此花区北港緑地2-3-75
tel. 06-6460-6688

携帯はAndroid派

2018年9月18日

最近、機種変更をした吉岡です。

両親が共働きだったということから
学童が終了した小学4年生から携帯電話を持っているのですが、
飽き性の私はすぐに機種変更をしてしまいます。

過去は
ガラケー ⇒ 2台
iPhone ⇒ 1台
Android ⇒ 3台

いやぁ…めちゃ変えていますね…。

そして今回は…Androidです。
Galaxy S9にしました。
今まで使っていたAndroidの中で1番カメラ機能が優れています。

感動…。
めちゃくちゃ綺麗なんです。
なんでもかんでも写真を撮る私にはとても嬉しかったです。

本当はiPhoneにしようか迷ってたんですけどね…。
Androidの魅力に負けました。

次は2年後に機種変更する予定なので、今から楽しみです。

初めてのお客様はこちらからどうぞ

お見積りはこちらから

資料請求はこちらから

wordpress実装 初期費用0円 ワードプレス構築

下層ページデザインサービス

Coding Pack News Letter

コーディングパックのメールマガジン

お得な情報満載!

バックナンバーはこちら

最新納品実績

  • コーディング

    2P

    2018.05.07

    服飾メーカー

  • コーディング

    1P

    2018.05.01

    不動産

  • コーディング

    1P

    2018.04.30

    専門学校

  • コーディング

    5P

    2018.04.27

    インテリアメーカー

  • コーディング

    1P

    2018.04.27

    美容メーカー

more

pagetop