murata_sの日記スマートフォン用の表示で見るmurata_sの日記2019-08-12画像をきれいな罫線で囲うIdea誰もが画像を罫線で囲うデザインを考えたことがあるだろう。私の場合、単にアクセントとしてつけたいと思ったこともあるし、ページ全体の統一感を出したいとか、画像が他の情報よりも重要なことを示したいと思ったこともあった。地と図の境界を明確にしたいという場合もある。画像一枚一枚に対してつける・つけない、あるいは何をつけるかを柔軟に決めることができる余裕なり仕組みがあれば何も困ることはないのだけど、ウェブの場合は様々な制約によって、そうはいかない場合が多くある。して、全ての画像に一括で同じスタイルを適用することになったりする。素朴に罫線をつけると、その種類によっては、画像のキワの色と線の色が調和しないことがあって、さて困ったということになる。経験的には、この問題は弱めの罫線を使用したいときによく起こる。そこですぐに思いつくのがこういった策だ。画像と罫線との間に隙間を設ける罫線を太くすることで、罫線を擬似的な背景色として扱う画像に負けないように強い色(しばしば黒)にするどの選択をするにしてもデザインのトーンに合っていればそれで良いけれど、どれもしっくりこない場合は、罫線を使うのを諦めて、背景色などの他のデザイン要素に同じような役割を担ってもらう必要が出てくるかもしれない。その前に試してほしい罫線が一つある。Borderと呼んでいる罫線だ。Borderこれは半透明の罫線を画像の内側に沿わせて重ねてある罫線である。現象として、画像のキワ1px分の色が変わっている様子が認識できる。画像のシルエットは極めてシャープだ。キワに白色がきても、黒色がきても、灰色がきても、滲んで見えることがない。総合的にみて満足度の高い罫線がつけられる。画像の色がわずかに変わってしまうのがデメリットだが、それを許容できて、なおかつデザインのトーンに相応しいのならば、選択肢の一つとして重宝するだろう。16:31画像をきれいな罫線で囲う関連記事2019-07-19ユーザーインタビューの知見これまで、担当しているプロダクトのユーザーを知るために「ユ...2019-05-13UIデザインのガイドラインとの付き合い方UIデザインの仕事をしていると、iOSやAndroidといったプラット...2019-04-04じゃじゃーんをやめる日頃デザイン案をどの段階で他者に見せていますか。ウェブサービスやアプリのデザインをしています。(16)アーカイブ検索スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。