デザインでつまずかない！ノンデザイナーのための基本ルール10個まとめ
優れたデザイン原則は、誰にでも学ぶことができ、活用することもできます。 このガイドは、デザインの現場で利用できる実用的で基本的なテクニック10個をまとめてご紹介します。これらの基本ルールを知るだけで、あなたのデザインがずっと良くなります。 ずっと使える、デザインの基本まとめました。【2020年改訂版】 プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】 コンテンツ目次 1. コントラストを活用しよう。 2. 「黒に近い黒」が「黒」よりも読みやすい。 3. 重要なコンテンツを最初に。 4. すべてのものを整列させよう。 5. 文字サイズと文字スペースに気をつけよう。 6. 検索結果の順番が重要なときは「リスト表示」。 7. まずは白黒でデザイン、あとから色を追加しよう。 8. 快適なデザインを目指そう。 9. 素敵な配色カラーパレットを使おう。 10. Apple や Google
Webデザインにおける写真のトレンド６選
高画質なスクリーンが一般的になったことで、視覚的なメディアとして発展するWebデザインにおける、写真の役割が大きくなっています。美しい写真の使用は、不変のテクニックです。 この記事では、Webサイトでの写真においてもっとも人気のある６つのトレンドを紹介します。 目を引くヒーローイメージ スクロール画像上の全面を占めるヒーローイメージは、Webデザインにおいて、もっとも人気の高いトレンドの１つです。 ヒーローイメージの価値は、瞬時にユーザーを夢中にさせることです。 人間にとって、視覚はもっとも強い感覚です。そのため、高画質なヒーローイメージは、もっとも速くユーザーの関心を引く方法の１つになります。 ヒーローイメージにより、ユーザーはすぐに引き込まれ、そのサイトへ期待を持ちます。
デザイナーが陥る無意識のバイアスを克服する方法とは？
Benjamin Earl Evansはイングランドのロンドン出身で、受賞歴のあるデザイナーです。彼はデザイン思考を活用してスタートアップの作成しており、より包括的な製品やサービスを生み出しています。 デザイナーとしての仕事が無意識のうちにバイアスに縛られていると気付いたのは、つい数か月前のことでした。当時私は、夢のようなプロジェクトにとりかかっていました。それは、苦手だったカラーパレットの作成を克服する機会を与えてくれるものでした。UXの仕事では、クライアントのサイトを数種類作成したら、フィードバックをもらうのが典型的な流れです。ですから私も隣の席の人に意見を求めました。しかし彼は「私は好きじゃないですね、面白みがありません」と冷たく言い放ちました。 情熱をもって作り上げたカラーパレットを真っ向から否定されて落胆した私は、なぜ「面白みがない」と思ったのか尋ねました。答えは驚くべきものでし
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
UIデザインにユーザーストーリーが必要な理由
Tom Brinton氏はBYUを2012年に卒業した後、CitrusBits、Wallaroo Media、CustodyXChangeでUI/UX設計者として働いてきました。彼は優雅なインターフェースをデザインすることが好きです。 あるデザインチームが、クライアントの新しいアプリのモックアップについて話し合っているとします。すると、アプリがどのようにあるべきかついて、チームメンバーはそれぞれ 違う考えを持っているということが明らかになります。こうなると、ミーティングはすぐに、「何が正しいか」というよりも、「誰が正しいか」という議論になってしまいます。 誰もが自分のデザインを守ろうとしますが、誰もユーザーを守ろうとはしません。ひょっとしてあなたにも思い当たる節がありませんか？ このようなときにこそ、ユーザーストーリーを導入する必要があります。 最近では、UI/UXのプロがアジャイル開発で
新種の寄生バチを発見、宿主を操り頭を食い破る
新たに発見されたクリプトキーパー。どうやって宿主を操っているのかは、まだわかっていない。（PHOTOGRAPH BY ANDREW FORBES, UNIVERSITY OF IOWA） 新たな寄生バチが発見された。その悪魔のような生態から、混沌を司るエジプトの神セトにちなんでEuderus setと学名が付けられた。通称はクリプトキーパー。“棺の番人”という意味だ。 米国南東部に生息するこのハチは、別の寄生バチであるタマバチの仲間Bassettia pallidaが作った「虫こぶ」に卵を産みつける。虫こぶは、寄生バチの幼虫などが木の一部をふくらませて作る突起で、このタマバチはカシの木に虫こぶを作る。（参考記事：「虫こぶ――虫がつくった究極の芸術作品」） 虫こぶに産みつけられた卵が孵化すると、クリプトキーパーの幼虫は自力でタマバチに寄生してその体を乗っ取り、木に穴を開けて外へ出ようとする。
ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
これからIllustratorを学ぶ人にオススメしたいチュートリアル、作り方35個まとめ
目まぐるしく変化するデザイントレンドに対応した作品を作り続けるのは、デザイナーにとってもっとも大変な課題のひとつです。これまで使っていたスタイルがいつの間に時代遅れになってしまうということもしばしば。 今回はデザイン表現の幅を広げる Illustrator チュートリアルをまとめてご紹介します。覚えておくと役立つテクニックはもちろん、新しいデザインテクニックを使って作成するデザインを中心にまとめています。 詳細は以下から。 これからIllustratorを学ぶ人にオススメしたいチュートリアル、作り方35個まとめ お好みの文字をチェリーパイで作成する方法 パイのサクサクとした質感や上にかかっている粉砂糖、チェリーどれもIllustrator のみでデザインできる、本格的なテキストエフェクト用チュートリアル。 ビスケットでできたテキストエフェクトの作り方 ツールでパスを描くだけでで、どんなシェ
ECサイトでデザイントレンドを取り入れるときの７つのポイント
メディア業界でのデザイン、編集、及び印刷出版物とオンライン出版物のライティングに10年以上の経験を持ちます。スポーツが好きで、サッカーとバスケットボールの旅を計画に多大な時間をかけ、また統計学にものめり込んでいます。 ECにおけるデザインと、デザイナーが実際にやりたいデザインは必ずしも一致しません。 ミニマリズムなどに代表されるシンプルですっきりとしたデザインは、最近のトレンドではありますが、販売サイトではあまり実用的ではない場合もあります。 ECにおけるデザインの最終的な目標は、ユーザーとの対話です。もっと直接的に言うのであれば、ユーザーにより多くの商品を買ってもらうように気を引くことです。 その目的を達成するという点では、最近のWebデザインのトレンドは逆効果になる恐れがあります。 デザイン vs 機能 機能性はECをデザインするときに最重要なものです。オンラインショッピングのサイトは
UIデザインの歴史に学ぶシャドウと奥行きの使い方
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 近年のUIデザインでは、不必要な要素を省き、機能性に焦点を当てるのがトレンドになってきています。デザインの機能面はプロダクトの成功への鍵である一方、その機能面をサポートするという意味で、ビジュアルへの細かい配慮も同じくらい重要です。 この記事では、シャドウなどの視覚的な要素がどのように処理された情報を伝達するものなのかを見ていきましょう。 UIの進化 : 疑似3Dからウルトラフラットデザイン インターフェイスにおける奥行きの幻覚 ユーザーの見るスクリーンは平らですが、デザイナーやエンジニアたちはスクリーン上の全ての物が3Dにみえるように多大など労力を割きました。疑似3D効果（シャドウ、グラデーション、ハイライト）は、ユーザーが操作可能な動作をひと目でわかるように
グッドデザイン賞を獲得した7つのサイトから学ぶ、ウェブデザインの12のテクニック | LISKUL
photo by Robert S. Donovanウェブデザインを担当していると、星の数ほどある他のサイトたちに自社のサイトが埋もれてしまわないか、心配になりますよね。 そこで、ユーザーに評判のよいサイトを作るために、プロデザイナーたちから優秀だと認められたサイトデザインを参考にしてみるのはいかがでしょうか？ この記事では、2013～2011年の3年間にグッドデザイン賞に選ばれたウェブサイト7つから、自社サイトに活かしたい12個のデザインテクニックをまとめて紹介いたします。 受賞作品を参考に、ヒットするウェブサイトを作りましょう！ 参考：BtoB製造業のWebサイト参考事例9選と、ホームページ作成の3つのポイント グッドデザイン賞とは？1957年に創設された日本で唯一の総合的なデザイン賞で、毎年企業やデザイナーから40,000件以上の応募があり、よいデザインを示す賞として広く親しまれてい
もう迷わない！HTML5のもっとも基本的なテンプレートはこれだ！（2016年版）
HTMLを書くときのベースとなる「書き出し」。いまどきはエディターにプリセットされていますし、ネットにも山ほど転がっていますが、どうせならきちんと意味を理解して、自分だけのテンプレートを作っておくとカッコいい。 HTML5を習得していくうちに、HTML5のテクニックをまとめて使ったひな型を作っておきたいと考えることでしょう。もちろんお勧めしますし、開始点として便利な、オンラインソースの使用も検討してみるもいいでしょう（もっと詳しく知りたい場合は、html5boilerplate.comやhttps://github.com/murtaugh/HTML5-Resetも参照してください）。 ただし今回は、構築内容も含め、コードを一から説明していきます。なぜならHTML5とCSS3を使ったサイトやWebアプリを作る際、使えるオプションに詳しくなれるし、この記事をテクニックの手引きとして参照しやす
HTML5 Conference
少し前には次世代のWeb標準技術であったHTML5は、既に多くの業界に広がり、浸透しています。今では、HTML5は当たり前のものとして利用され始めています。また、それに留まらずHTML5に続く次のWeb標準技術は、現在も多くの仕様が検討されており、着々と歩みを進めています。そうした中で、Web技術が多くの業界、様々な環境で活用されることによる新しいノウハウや最新情報をキャッチアップすることが、Web技術者たちに求められています。 そして、本カンファレンスが、それらのノウハウや最新情報の共有、そして交流の場としてありたいという想いがあります。Web技術者同士だけではなく、Webを取り巻く様々な企業や団体と、垣根を超えて気楽に交われる機会を作りたい。そういった「Web技術者の祭典」を目指しています。本カンファレンスを通じて、皆さんの成⻑を促す機会になれば幸いです。
Pure CSSで実装するコーナーリボン - NxWorld
要素や画像の角などに配置するコーナーリボンを、画像は使用せずにCSSのみで実装してみたものです。 HTMLとCSSで実装する場合は幅や位置の指定が若干面倒に感じることはありますが、その分カラー変更等も容易で角度なども自由に変更できます。 イメージにあるように、作成するのは「左上」「右上」「左下」「右下」の4パターンのコーナーリボンとなります。 「左下」「右下」に表示しているものは意図的にテキストを逆さに表示させていますが、通常の見栄えで良いのであれば後述するコードのtransform: rotate();の値を変更してください。 ここでは実装のコードのみ紹介しているので、実際に表示を確認したい場合は以下デモで確認できます。 HTMLと共通CSS 紹介しているものは下記のようなHTMLを使用しており、共通のclassとして.ribbonを記述しています。 また、それに加えて例えば「左上」の場
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
