全ての人が知っておくべきデザイン・レイアウトの基本ルールとテクニック15選 - LITERALLY
デザイナーでなくとも、デザインについてのいくつかのルールを知っておくと、日々の生活で何かと役に立つ。今回は、誰もが知っておくべきデザインの基本原則・テクニックを紹介する。 1.デザインの基本原則を覚えよう 1-1.「1/3ルール」を覚えよう レイアウトや写真の構成を考えるときには、黄金比*1よりも「1/3の法則」が便利だ。上の図のように、全体を9等分割したとき、各線の交点（図の丸点）に主張したいモノを配置するようにする。これだけで、不思議とスッキリとしたデザインになる。技の1つとして覚えておこう。 1-2.端をそろえて線をつくろう 写真や文などの「要素の端」をきちんとそろえると、きれいに整理されて見える。これはデザインにおいてとくに重要な基本ルールだ。全てをそろえる必要はないが、縦にいくつか要素を並べる場合は常に意識しよう。 1-3.視線の流れを意識したデザインにしよう 情報がたくさん詰め
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
最近Webデザイン界で流行っている「Duotone」をうまく使えば超イケてるサイトに様変わりするに違いない - Brian'z Imagination
その昔アンディ・ウォーホルという巨匠が描いたマリリン・モンローのポップアートのレプリカが4年くらい前にマンションに飾ってあったのを思い出すけれど、最近Webデザイン界では海外を中心に「Duotoneデュオトーン」と呼ばれるデザインが流行りだしている。 シンプルでありながら、ポップでビビッドで非常に印象に残るデザインなので、「Duotone」を極めれば超イケてるサイトになりそうな予感。 最近流行っている「Duotone」って何ぞ？ 「Duotoneデュオトーン」は「Duo(2つの)」＋「tone(色)」をあわせた言葉で、ベースとなるミドルトーンとハイライトカラーの2色を中心に描き出されるハーフトーン作品のこと。Duotone作品自体は昔から存在するのだけれど、昔のアーティストが一生懸命に写真をつなぎあわせていた時代から時が経ち、Photoshopのアップデートで簡単に写真を加工してDuoto
英国政府のWeb担当が作った“デジタルデザインの原則10か条”がスゴい！ | 初代編集長ブログ―安田英久
今日は、英国政府のWebサイトなどを担当する「政府デジタルサービス（GDS）」の部署が公開している「デザイン原則の10か条」について。「良いデジタルサービスを作り、運営していく」ためのポイントがコンパクトにまとめられています。 英国政府（gov.uk）のサイトには、「デザイン原則（Design Principles）」というページがあり、そこには、次のようなことが書かれています。 まずニーズからはじめる ―― 自分たちのニーズではなく、ユーザーニーズから。本当のユーザーを理解し、そのニーズを知る。想像や思い込みではなく、ちゃんとデータで。 なんでもかんでも手を広げず、するべきことだけをする ―― 政府がしなければいけないことだけをし、他の人がすでにやっていたら協力する。 データをもってデザインする ―― 試作し、実際のサイトで実際のユーザーにA/Bテストを行い、その結果をデザインに活かすや
情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ
「Empty Data（またはEmpty Status）」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります（Webでの404に近いですが、少し違います）。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
グーグル 無料のウェブ制作ツール Web Designerを公開
Googleからものすごそうなツールが登場。Adobeのツールがすべて合体したようなツールです。Illustratorのようなパス描画を可能とし、3Dビューで編集まで可能、さらにAdMobの設定までできてしまい、タイムラインでHTML5のアニメーションまでできてしまうようです。 直感的ツールで作ったデザインをマルチデバイスに対応したウェブページとして吐き出してくれるようです。又、デザインツールで作られたコードをコードビューに切り替えて直接編集することまでできてしまい、まさにかゆいところの手が届く感じの機能が網羅されているようです。 新規ファイル作成画面 3Dビューを備えたイラストレーター的ツール チュートリアルがこちらで用意されています。 Google Web Designer Help これは使い込んで見て損はなさそうですね。恐ろしいツールが出てきてしまいました。Adobeはどう出る？
売れるサイト作成に必須！たった４つのWEBデザインの基本法則
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. インターネットをビジネスに活用することが当たり前になり、競合他社がひしめく現在のWEB市場において、WEBデザインは以前よりも遥かに重要性を増している。 なぜなら、WEBデザインそのものが、コンバージョンを大きく左右する要素の１つとなっているからだ。 しかし、デザイン的に素晴らしいスキルを持っているデザイナーは数多くいるが、デザインとコンバージョンの双方にフォーカスしているデザイナーはまだまだ少ないように思う。 そこで、本日は、私自身の経験から、WEBデザイナーの方にも身につけておいて欲しい、コンバージョンを生むためのWEBデザインの考え方をシェアさせて頂こうと思う。 それでは、早速始めよう。 また、私たちバズ部は12年で400社以上のメ
そのデザイン処理、こんな風に工夫すればもっと良い物になりますよ / Maka-Veli .com
お前偉そうだなシリーズ第一弾 まぁ全部、全体のデザイン次第ですし、流行りモノ感もありますが。 ちょっとだけ変えると、グッとクオリティ上がりますよー的な小ネタです。そしてかなり個人的趣味です。 シャドウ ドロップシャドウなんかは手軽にクオリティ上げられていいですよね。 ただシャドウはつけすぎる(濃すぎる)と主張が強くて重くなりがち。 シャドウ自体はただの効果・装飾ですから、本体を引き締める程度にかけておけば良いと思います。 また、単なる上下・左右のシャドウではなく、球体・曲線でシャドウを上手く入れていくと面白いですよ。柔らかみもありますし。 グラデーション 立体感を出してチープな印象を防げるグラデ。 ただ、最近はベタ塗りでビビットに見せる装飾が流行ってきましたね。 思い切ってベタに変えるのも手。 もしくは、かなり差を狭くして「これグラデ？」と思わせるくらいのモノが良いかも
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック：ズルいデザイン（1）（1/2 ページ） デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
参考にしたい日本人クリエイターのポートフォリオサイト 40
Warning: Use of undefined constant more_link_shrarp_remove - assumed 'more_link_shrarp_remove' (this will throw an Error in a future version of PHP) in /home/users/1/limeline/web/nnmal/wp-content/plugins/more_link_sharp_remove/more_link_sharp_remove.php on line 16 Warning: Use of undefined constant ddsg_language - assumed 'ddsg_language' (this will throw an Error in a future version of PHP) in /ho
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
HTML5時代のWebデザイン
2. 自己紹介を… こもりまさあき http://protean.im 1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大 学卒業後そのまま正社員となり、入出力業務、デザイン業務、ネットワーク 関連業務に並行して従事。2001年、会社を退職しフリーランスの道へ。 案件ごとに業務内容や立ち位置が異なるため、職域的な肩書きはなし 近著に『レスポンシブ・ウェブデザイン標準ガイド（MdN刊）』『Webデ ザイナーのためのHTML5移行ガイド（共著・インプレスジャパン刊）』、 など HTML5 Conference 2012 特別価格980円 Twitter: @cipher / @proteanbm http://direct.ips.co.jp/html5/ Instagram: @cipher 3. これからお話しすること • Webをデザインするって何だろう？ • どん
黒を使うな - モジログ
Ian Storm Taylor - Design Tip: Never Use Black (August 2012) http://ianstormtaylor.com/design-tip-never-use-black/ デザインでは黒を使うな、という話。筆者のIan Storm Taylorは、Segment.ioというサービスの共同創業者で、デザイナーでもあるようだ。 筆者は子供のとき、美術の教師から、黒には注意せよとアドバイスされた。その後、RISD（Rhode Island School of Design）でも似たようなことをたびたび言われたとのこと。 人間は、「暗いもの」を「黒」と結びつけてしまいやすい。しかし、ほんとうの「黒」というものは、実はめったにない。筆者はまず、Wayne Thiebaud（アメリカのポップアートの画家）の絵を例に、影が黒ではないことを示す。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ロゴを作る時に知っておきたい11の基本ルール
Flat UI - Free Bootstrap Framework and Theme
ノンデザイナーのための配色理論
株式会社ガイアックスの公式サイト › ガイアックスオフィシャルサイト
ウェブデザインのセンスを学ぼう、2012年上半期洗練されたディテールのUIデザインのまとめ