フレークの素 | Web制作・システム開発のCreativeFlakeブログ

投稿

5月, 2014の投稿を表示しています

CSSだけ！画像なし！テキストの色を半分変えるテクニック

こんにちは、クリエイティブフレークです。この例は、画像を使わないでテキストだけでコーディングしています。そんなの画像を使えば済む話じゃない？という考えの方もCSSだけで組むとこんなにいいことがあります。メリット１全体のファイルサイズが小さくなるメリット２テキストなのでSEOとしても効果的メリット３文字の変更、フォントサイズ、色の変更が簡単作り方は簡単。まずはどうやって表示しているのかという仕組みから説明します。ベースとなる文字の上に別の色で半分だけの文字をかぶせるだけ次はソースコードです。 HTML H a l f CSS .halfStyle .hs-base, { position: relative; display: inline-block; font-size: 80px; overflow: hidden; white-space: pre; color: #3c2210; } .halfStyle .hs-base:before { display: block; z-index: 1; position: absolute; top: 0; width: 50%; content: attr(data-content); pointer-events: none; overflow: hidden; color: #6...

ゲシュタルトの法則をWebデザインにも利用しよう

こんにちは、クリエイティブフレークです。一度は聞いたことがあるかもしれない「ゲシュタルト」。ゲシュタルト人間の精神を、部分や要素の集合ではなく、全体性や構造に重点を置いて捉える。この全体性を持ったまとまりのある構造をドイツ語でゲシュタルト(Gestalt ：形態)と呼ぶ。人間の脳がものの形、要素をどのように認識するか、ということですね。人間がゲシュタルトを感じるときに起こる、さまざまな種類を「プレグナンツの法則」と呼ぶそうですが、その具体例を簡単に紹介。ゲシュタルトの法則１ : 近接の法則近接の法則は、近くにあるもの同士が同じグループだと認識されやすい。ゲシュタルトの法則２ : 類同の法則類同の法則は、同じ色や、同じ形同士が同じグループだと認識されやすい。ゲシュタルトの法則３ : 共通運命の法則共通運命の法則は、同じ方向に動くもの、同じ周期で点滅するなどが同じグループだと認識されやすい。共通運命の法則は、近接の法則や類同の法則よりも強く働く。ゲシュタルトの法則４ : 良い連続の法則良い連続の法則は、図形はつながった形になりやすいと認識されやすい。近接、類同、共通運命の法則から、切れ目がなくや突然変化しない図形がよいものだと分かる。ゲシュタルトの法則５ : 閉合の法則【】や（）のように、閉じた形は同じグループだと認識されやすい。】【は同じグループと認識しづらい。ゲシュタルトの法則６ : 面積の法則小さいものが図として、大きいものが背景として認識されやすい。ゲシュタルトの法則７ : 対称の法則対称な図形は閉じた図として認識されやすい。このゲシュタルトの法則は心理学をはじめとした様々な分野に応用されていますが、人間の特性を活かすという点で、デザインの分野にも活用されています。たとえばリモコンのボタン配列。数多くのボタンを、誰が見ても直感的に分かりやすく、誤操作させないように配置しています。こちらは私のMacのドック。急いでいるとよく間違ったアイコンをクリックしてしまうので、試行錯誤の末、この配列が一番使いやすい結論に。 Webデザインにおいては、もしすべてのパーツが単調に置かれて...

1周年

こんにちは、クリエイティブフレークです。おかげさまでCreative Flakeは設立から1周年を迎えました。「Web制作・システム制作」と銘打ってこれまで様々なものを制作させていただきました。 WebシステムやWebデザインは、常に新しい基準ができたり、新たなツール、流行が変わったりと、日々刻々と変わり続けています。特に当事務所のある東京ではその流れが速いと感じますが、大変良い刺激になるとも感じております。 Creative Flakeでも時代のニーズに合った柔軟な方式で、いつでも最新の技術を取り入れながら100%自社開発で制作しています。またWeb以外でも、紙媒体のデザインや、ライティング、コンサルティングなど、いい意味でWeb開発事務所らしくないチャレンジもできました。これもひとえに良いクライアント様に出会えたこと、理解者がいたことだと感謝しております。これからも努力を重ね、良いもの、良いサービスを作って参ります。 Creative Flake スタッフ一同 Written by Creative Flake