この記事では、Webレスポンシブデザインにおけるグリッドの使用方法をまとめた基本ガイドです。デスクトップ、タブレット、モバイル向けのグリッドの使い方をそれぞれご紹介します。 レスポンシブグリッドの重要な部分に入る前に、基本的な用語を正しく理解しましょう。 レスポンシブ・グリッドの基本用語まとめ フィールド要素（Field Elements） むらさき色の部分がフィールド要素 フィールド要素は、文字テキスト、イメージ画像、またはその両方を組み合わせたデザインのブロック要素を指します。背景色は、文字テキスト/イメージ画像の背景でない限り、実際にはフィールド要素としては扱いません。 その他にもユニット、要素、親コンテナ（Parent Containers）など別の呼び方もありますが、どれも一緒と考えて構いません。 カラム（Columns） カラム・列は、デザインコンテンツの幅を構成する濃いピンク

当サイトでは、定期的に新しく公開された最新Webサイトデザインをまとめていますが、今回はいつもとは異なり、2019年のベストWebデザイン50個を厳選、ピックアップしご紹介します。 2019年は特に選ぶのが難しいほど、素敵なWebサイトが数多く公開されたのですが、以下は特にお気に入りのベスト50となります。型にはまらない独自のアプローチを採用し、2019年のデザイントレンドも積極的に取り入れているサイトを集めています。 フルスクリーン動画や個性のあるイラスト、ミニマルスタイル、多彩なアニメーションなど2020年に引き続き人気となりそうなトレンド多め。昨年のベストWebデザインと比較してみても良いでしょう。 【総まとめ】2018年印象に残った世界のベストWebデザイン厳選51個 【総まとめ】2019年印象に残った世界のベストWebデザイン厳選50個 eDesign Interactive ヘ

webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は

Webでも紙でも文字のデザイン、タイポグラフィは非常に大きな存在です。 文字のデザインで基本となるカーニングについて、基礎知識から基本的なやり方、CSSでのカーニングのやり方までを紹介します。 The Ultimate Guide to Kerning 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 この画像のどこがおかしいか カーニングとは カーニングの基本的なやり方 カーニングはいつ必要なのか カーニングではないもの CSSでカーニング 終わりに この画像のどこがおかしいか この画像のどこがおかしいのか、経験の浅いデザイナーは頭をひねるかもしれません。

デザインの4つの基本原則とは デザインの4つの基本原則は、デザインの基本を理解する上でとても役に立ちます。「デザインの4大原則」と呼ばれる場合もあります。 デザインの基本原則は、下記の4つの原則に分けられます。 そもそも、デザインの一番の目的はなんでしょうか。見た目の美しさも大事ですが、「しっかりと伝わる」ことが重要な場合が多いのではないでしょうか。 デザインの4つの基本原則を理解することで、相手に伝わる分かりやすいデザインを作ることができるようになります。 これから紹介する4大原則は、人によってはすでに無意識のうちにデザイン制作の際に実現できているかもしれません。 しかし、それぞれを正しく理解し、適切なタイミングで使用することによってデザイン制作で失敗する可能性を減らすことができるでしょう。 1. 近接(Proximity) 人間は、近くに並べられたものを無意識のうちにグループとしてみな

こんにちは。Webディレクターのしゅんです。 僕はWebの知識がほぼゼロの状態で、第二新卒としてLIGに入社しました。最初の頃は、右も左もわからずに苦労しました……。 そもそも、イケてるWebディレクターになるためには、お客様が抱えている課題を解決するための的確なデザインの提案や、それに伴うWebサービスの知識を増やすことが必要不可欠です。 しかし、駆け出しのWebディレクターであれば「そもそも、何を見て情報を収集すればいいのかわからない」という方もいらっしゃるかと思います。 そこで今回は自分の経験をもとに、情報収集のために見ておくべきサイトをまとめてご紹介したいと思います！ とりあえずおさえておきたい国内のデザインギャラリーサイト4選 ひとまず国内のデザインギャラリーから攻めていきましょう。有名どころをタイプ別に紹介したいと思います。 1.MUUUUU.ORG 国内を中心に、量と質にこだ

デザイナーのベーコンです 質問箱11回目です 今日も「デザイナー友達」の感覚であなたの質問に答えていきます！ 今日の質問はこちら! デザインスキルの身につけ方を知りたい【勉強方法・学び方】 質問ありがとうございます 確かに、楽しくデザインさせてもらっています！ デザインが嫌になる瞬間、めっっっちゃありますよ… ひとまず、こちらは後にして、先にデザインスキルの身につけ方について答えます デザインは独学、泥臭いスタイルでやっています まず、ぼくはデザイン独学で学びました 美大を出たわけでもありません、デジタルハリウッド札幌校出身です（ソフトの使い方を学びましたデザインは一切学んでいないです） デザインや絵が好きかというと、Windows95でテレホタイムを楽しんでいた、ただのパソコン好きでした だからこそ、言いたいのですが、デザインは練習すれば（ある程度）習得できます 仮にものすごく上手くなれ

はじめに 以前（2年半前、当時学生）、Webデザインの勉強中にトレースの記事を書いたことがありました。 こんなサムネイルを見たことがある人が居るかもしれません..。（記事は昔のものなのでリンクは貼りません） なぜかこの記事が未だにじわ伸びし、noteで紹介されたりしており、「まずい..」と思ったため新たに記事を書くことにしました。 ちなみにサーチコンソール見ても「Webデザイン トレース」の検索が多く、勉強したいけどやり方がわからない人が多くいるんだなと再認識しました。 学生の時の私もまさにそれで、デザイン系の学部に通っていたため「じゃあデザインできるんだね！」的な印象を持たれがちでした。 でも大学ではWebやアプリのデザインの授業があるわけではないので、その辺は独学だったり、アルバイト先のデザイン事務所で教えてもらったりで勉強していました。 トレースは実際に手を動かすので、ツールの勉強に

配色がうまくいかない場合の多くはたくさんの色をついつい使ってしまった結果招いていることが多い。まずは2色で配色をしてその上で少しずつ色の調整をすることによって、まとまりのあるデザインが作りやすくなる。 一般的に言われている配色は、ベースカラー7割、メインカラー2割、アクセントカラー1割。一番表現したいことをアクセントカラーにすることで表現したいことが何かはっきりわかりやすくなる。 なんとなく落ち着いていて物足りない場合、色相環で反対の色をアクセントカラーに持ってくるとインパクトがでる。この色相環の反対の色を反対色や補色といったりもする。 逆にガチャガチャして色がうるさい場合は、色相環の隣り合った色数色を選び配色することで全体的にまとまった印象になる。この色相環の近くにいる色のことを近似色と呼ぶ。 配色を決める場合、いくつかの軸があるが、何を表現しなければいけないかというテーマによって配色を

*** はじめに少しフライング気味だが、デザイナーとして新社会人をスタートする方が、素敵な先輩や仕事とめぐり逢い、そして、その後の素敵なキャリアを歩むことを願って、このブログを綴りたい。 なぜ、こんなことを書きたくなったかというと、同じ日に同時多発でキャリアに関することが巻き起こり、これは私も、何かを書かなければいけない、お告げのようなものを受けとった（気がした）からだ。 ※ちなみに、noteで書いたインターン生募集の記事はこちら 師匠との出会い 私のデザイナーとしての社会人スタートは、渋谷のデジタルマーケティングの大企業で、大規模なWEB開発のデザインチームだった。長い研修が終わり、デザインチームに配属となった夏の日。私はワインが似合う素敵な女性デザイナー（師匠）と出会った。その時の私は24歳。あれから10年が立ち、34歳の私は師匠と同じくらいの年になったはずだが、今でも超えられた気がし

同じようなデザインの手直しに人生の貴重な時間を費やしたいと思う人はいません。過去に別のアプリなどで解決されている問題があるのなら、その問題の解決策がテンプレートとして既に存在するはずです。それこそが、誰にでも使えるデザインパターンです。 ここでは、Web上でデザインパターンを見つけるのに最適なサイトをリストアップしました。執筆時現在、これらのリソースはすべて無料ですが、一部はプレミアム版などを支払うように求められる場合があります。なお、この記事は、これらのサイトのアフィリエイトではないことを最初に断っておきます。 UI Patterns UI Patternsでは、好みのパターンを簡単に検索でき、使えると思ったパターンをグループ化することができます。また、自分のデザインでのパターン活用に役立つ、UIデザインパターンに関する多くの興味深い記事があります。 WELIE Interaction

かなり売れているこの本！こちらは画像多めで紹介します。 「デザインとはなにか」を楽しくわかりやすく説明したベストセラーです。 『なるほどデザイン』の良いところ ベスト３ ３位　参考例のデザインのクオリティが高い（かっこよくて、わかりやすい） 当たりまえだろ！と思いますよね？ でも、デザイン本って参考のデザインがダサいことかなりあるんですよ。 理由はぼくも同業なのでわかります、理由はこれです デザインは作るのに時間がかかる… いいデザインを作るって、グラフィックデザイナーのプロでも時間がかかるんです。 簡単にいうとこんな公式です。 デザイン力　☓　時間　＝　デザインのクオリティ よく「デザインをさっと作れるよね？」 と言われますけど、仕事ではかなり時間をかけて作っています。 これって意外と知られていないですよね。 というわけで、なるほどデザインは参考例のデザインクオリティが高い（かっこよくて

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

美しく見せるGooleフォントの組み合わせをクラシック名画と共に紹介します。 文字を使って、モダンな雰囲気を演出したり、ミニマルなデザインを作り出したり、タイポグラフィを勉強するときの参考にどうぞ。 The Ultimate Collection of Google Font Pairings by Lou Levit 下記は元サイト様にライセンスを得て掲載しています。 フォントは書体の組み合わせも大切ですが、ウェイトも非常に重要です。背景の名画と合わせて、お楽しみください。

2017/6/29 UX failconの登壇資料です

ビジュアルデザインを学ぶうえでもっとも基本的なルール、原則10個を、現役ビジュアルデザイナーの José Torre が詳しく紹介しているので今回はご紹介します。 ずっと使える、デザインの基本まとめました。【2020年改訂版】 ビジュアルデザインに必要な10の基本原則まとめ #1 ポイント、ライン、シェイプ 点（英: Point）、線（英: Line）、形（英: Shape）は、どんなデザインにおいてもっとも基本的な構成要素です。シンプルなアイコンから複雑なイラストまで、これらの要素を組み合わせることでどんなデザインでも作成できます。 幾何学（英: Geometry）としては、ポイントはX座標とY座標の組み合わせで、Z軸を追加することで3Dになりますが、今回は２次元デザインについて詳しく知りましょう。 ふたつのポイントをつなげると線になり、無数の点でできた線を組み合わせることで、どんな形で

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

「より優れたビジュアルデザイナーにどうしたらなれますか？」と尋ねられたベテランデザイナーの Jonathan Z. White 。 彼が現在習っている中国語を引き合いに、より優れたデザインを手がけるには基本原則をまず押さえることがいかに重要であるか、実際に活用できるテクニックや簡単な練習方法と一緒に紹介しています。 まずは、ビジュアルデザインを次のレベルに引き上げるためにマスターしたい、いくつかの基本原則を詳しく見ていきましょう。 ずっと使える、デザインの基本まとめました。【2020年改訂版】 基本原則その1 : 書体の基本に戻ろう。 フォントやタイポグラフィーを見れば、デザイナーが何を実現しようとしたのか色々アイデアが巡るでしょう。書体は、デザインの基本といっても良いでしょう。 デザイン全体を書体のみで作成することもでき、選択したフォントに合わせてカスタマイズすることも可能です。デザイン

京大マイコンクラブ(KMC) 春合宿2017 KMC Website: https://www.kmc.gr.jp/index.html Read less