Webページのレイアウトに役立つ20のデザインテクニック
ページのレイアウトをする時に全てが同じ大きさ・形・色だと、それは非常に退屈なデザインになってしまいます。要素を整理し、階層をつくり、重要な箇所にフォーカスがあたるようにするにはコントラストを効果的に使うことです。 レイアウトにビジュアルの興味を加え、デザインを生き生きとさせるコントラストの使い方を紹介します。 色の値(value)とはカラーの明るさや暗さをあらわす用語で、ピュアブラックとピュアホワイトに最もコントラストがあります。だからといって高いコントラストのデザインをつくるために、白黒のカラーパレットにこだわる必要はありません。簡単な方法の一つは、そのカラーからより明るいカラーと暗いカラーをつくり、コントラストを加え、あなたのデザインの特定の場所を目立たせることができます。 シンプルな例として、下記のような暗い背景に明るいテキストは効果的にコントラストをつくっています。背景が写真で、テ
商品の見せ方にこだわりのあるECサイト5選 | Fashionsnap.com
こんにちは。デザイナーのぺちこです。 突然ですが、みなさんはどのくらいの頻度でネットショッピングを利用していますか？ ネットショッピングの利用者がどんどん増えていく中で、ECサイトもいろんな工夫をしてきているなあ！と最近実感しています。 そこで今日は、ただ商品を並べて売るだけじゃなく、ユーザにとって嬉しい工夫を凝らしてあるECサイトをいくつかご紹介したいと思います！ 商品の見せ方にこだわったECサイト5選 OVER https://overclothing.com/ セルビアのアパレルブランド「OVER」。 近頃、商品を部分的に拡大した画像があったり、クリックすると拡大画像が表示されたり、という見せ方がよく増えてきたなあと思います。 このサイトはそれだけでなく、マウスカーソルを置いた周辺エリアの拡大画像が、全体像の横に並んで表示されます。 操作がしやすく、全体像を確認しながら布の素材感やス
MdN Design｜総合情報サイト
フレームワーク＆API 5-02 Web制作をスピードアップする99lime Webサイトの制作スピードを高速化するためのCSSフレームワークが99limeだ。汎用的なレイアウトやUIなどのパーツも備わっており、手軽に見栄えのよいデザインのサイトが制作できる。 制作・文／酒井能克（有限会社ブルームーン） BROWSER IE…7over Firefox…3.6over Safari…3.1over Chrome…10over Web制作をスピードアップするフレームワーク タブ、ドロップダウン、スライドショーなど、さまざまなパーツを組んで、サイトを作ることを目的としたHTML5 ／CSS3対応のフレームワークが99limeである【01】。 素早く簡単に見栄えのよいサイトが作成できるので、クライアント向けのサンプル制作などによく利用される。またMITライセンスなので商用サイトへの適用も可能であ
Google製無料広告制作ツール「Web Designer」とは
グーグル製HTML5アニメーション作成ツールとして注目を集める「Google Web Designer」。本連載では、全4回にわたってGoogle Web Designerについて紹介します。 連載ラインナップ（予定） 第1回：Google Web Designerとは 第2回：Google Web Designerの基本操作 第3回：バナーのチュートリアルで学ぶGoogle Web Designerの使い方 第4回：コンポーネントを使ったインタラクティブバナーの制作 4回の連載で、Google Web Designerのインストールや基本操作を学び、最終的には簡単なアニメーションバナーから、より動きのあるバナーの作成を目指します。 ※本連載は、Windows環境での作業をベースに説明を進めていきます。 Google Web Designerでできること Google Web Design
デザインの裏側を理解できるエンジニアになろう - Qiita
「画面」のデザインは、エンドユーザーから見た「プロダクト」との唯一の接点。超大事。 そんな画面のデザインにまつわる、エンジニアが「いじる」ときに気をつけると、もしかしたら面倒が減って争いが減ってみんなが幸せになれるんじゃないかなあ、とか、そもそもの設計上で考慮できると、もしかしたら使う人たちが幸せになれるんじゃないかなあ、というポイントを、思い付きで書いていくので、あとは誰か整理してほしい的な投げやり感あふれるアレコレ。デザインとコーディングの話を混ぜて書いてます。 空白の理由を考える編 その1. 空白にまつわる認識の相違 例えば、Tumblrのダッシュボード。右肩のメニューの隅までちゃんとレイアウトされてるなーって感じがします。 でも、もしあなたが「空白を理解しないエンジニア」だった場合、こんな感じにコーディングしてしまうかもしれません。 （※画像はイメージです） 「なーんか、素人感があ
すごい便利になった！javascript入門の基礎知識と小技まとめ
作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
