menu

【デザインのツボ】余白、とってますか?

2018年12月11日

コーダーの輿水です。
【デザインのツボ】第5回!
年内最後の【デザインのツボ】は、何もないことに意味がある!余白についてお送りします。

■今回のテーマ

デザインの上で余白の重要さは言うまでもありません。
特にWEBページをデザインする場合には、“ページ左右の余白の指定”を忘れないでください。

■どういうこと?

WEBページのデザインでは余裕のある画面幅を想定してデザイン全体の幅を決め、その中でコンテンツの幅を決めてデザインを作っていく場合が多いかと思います。
しかしこのとき、デザイン全体の幅に余裕があるせいで、コンテンツ幅ぴったりの画面で見たときの余白、というものが忘れられがちなんです。
文字が画面端にくっついていると、まず見栄えが悪くなってしまいます。更に、左右に余白のないサイトは操作性が悪くなってしまう場合があります。特にスマホサイトの操作では画面端が使われやすく、良くありません。

■何が困るの?

「幅が1000px以上の画面では横スクロールが発生しないようにしたいな。じゃあコンテンツの幅は1000pxで、とりあえずデザイン全体の幅は1200pxでデザインしよう!」という感じでデザインを作るとどうなるか・・・。上の画像をご覧ください。
確かに幅1000pxの画面で横スクロールは発生しません。しかし赤い矢印の先、画面左端を見るとテキストが画面端にぴったりくっついてしまっています。これでは見栄えが良くありません・・・。

これをデザインで「コンテンツの内側:980px + 余白:左右10pxずつ = コンテンツ:1000px」などとしておけば、コンテンツが画面端にくっつかず、スクロールも発生しないんです。
またコンテンツを1000pxにしても、ガイドなどで外側にわかるように余白を示しておいてもらえれば、コーダーが意図を汲んで余白をつけた実装をすることができます。
上の画像の例では、コンテンツ内にもコンテンツ外にも余白が示されていないため、いざ実装すると余白がない画面になってしまった・・・、というわけです。

デザイン中は余裕のある領域でデザインを行う場合が多いと思いますが、想定する最低幅ぴったりの画面や、デザインより幅がはるかに大きな画面で見たときにどう見えるのか?考えながらデザインして、ワンランク上のデザインにしましょう!

そうだ 歯医者、行こう。

2018年12月4日

先日3本目の親知らずを抜きました。
フロントの武藤です。

どこの歯が痛いのか
上なのか下なのか
虫歯なのかそうじゃないのかも分からず
なんか痛いなぁとモヤモヤと数日を過ごし
とりあえず歯医者に行こうとなりました。

歯医者さんで診てもらうも虫歯が特定できず…
強いて言えば左下の親知らずかなぁと。

ということで、その日が土曜でしたが
少し無理を言ってその場で抜いてもらいました。
(翌日休診日で何かあっても診てもらえない)

帰宅して親知らず抜いてきた~と
主人に報告すると結構驚かれました。

主人含むまわりの人の経験談が結構壮絶なお話で
抜歯後もとてもつらかったようなので
きっと私はラッキーなパターンだと思います。

その日は腫れることもなく痛み止めを飲んで
予定していた買い物に行き休日を楽しみました。

今では親知らずを抜いてスッキリ。
抜歯前の痛みも感じなくなりました。
やはり親知らずが原因だったようですね。
ヨカッタヨカッタ!

やっぱり年末年始に歯が痛かったら
ご馳走食を思う存分楽しめないし
そんなのは耐えられなーーーい(T_T)
という食い意地が張っている故の即決でしたね…

※あくまで私の場合は特殊だと思うので参考ならないと思います。
 親知らずの抜歯はお医者さんとよく相談して下さい。

我が家も段々とクリスマス仕様になってきました☆

師走はバタバと忙しいですが、
年末年始は楽しみたいですね☆

豊岡でカニ三昧。

2018年11月29日

スタッフの脇本です!

先日豊岡でカニを食べてきました。

関係先の合宿に同行させていただくということで、
気合と気愛を入れて、
カニ様を美味しく頂戴いたしました。

カニしゃぶ。
カニ刺。
焼きガニ。
カニ味噌。
ゆでガニ。
カニ雑炊。

んはぁ~(*´Д`)

11月に解禁となり、シーズン到来。
週末は大変込み合うそうです。

雪が降る前で、気軽に足を運ぶことが出来て、
良かったです。

関係者の皆さま幸せなツアーを企画してくださって、
ありがとうございます。

来年もご一緒できるよう、
頑張ります。

日本三大夜景 -摩耶山-

2018年11月20日

先日、初めて摩耶山の夜景を観にいきました。

元々観に行ってみたかったものの、機会が無く行けていませんでした。
いざ行ってみるとすごい綺麗で…。

ほとんどカップルしかいませんでしたね。
先輩と行っていたのでなんか虚しくなりました…。笑

1つ思ったのが、
お酒を飲んでいく場所ではないなと…。

私は乗り物酔いをしやすく、
さらにお酒も飲んでいたので山道がとても辛かったです…。
次回行くときは飲まずに行きます。笑

イルミネーションを観に行くのは好きなのですが、
夜景は夜景で素敵でした。

他の夜景も観に行ってみたいです。

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

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

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

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

お見積りはこちらから

資料請求はこちらから

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