この記事は「RUNTEQ Advent Calendar 2024」23日目の記事になります。 はじめに プログラミングスクールRUNTEQでエンジニア兼講師をしているいっぺい（@ippei_111）と申します。 いきなりですが個人開発を行う時にアプリケーションのUIを考えるのに悩んだ経験はありませんか？ エンジニアあるあるかもしれませんが、個人開発をする際に機能の実装はできるが、デザインの部分でどうしたら良いのか迷ってしまい、手が止まってしまうことがあると思います。 本来機能開発に時間をかけたいが、デザインに凝りすぎてしまい、余計な工数と時間がかかってしまうことも多々あると思います。 また、デザインに関する知識と経験がないエンジニアがデザインを考えると、「なんかダサいデザイン」「使いづらいUI」になってしまうのもエンジニアあるあるかと思います。 本記事では、デザインに不慣れなエンジニアで
webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は
A curated list of websites with beautiful free icon design sets that can be used for personal and commercial projects. Icon design can be hard to get right. Creating a set of unified icons that compliment each other can be very challenging. The best designers are able to even add personality to an icon set to match the tone of the project. In this post, we wanted to share some of the best sites to
みなさんこんにちは。 CSのデザイン担当たなべ（@cs_tanabe）です！ 先週のおぐろからのお題は 「ノンデザイナーさんへおくる 明日から使える余白テクニック」でした。 デザインをしている人たちなら当たり前にやっていることですが、 あまりデザインする側に回ったことがない人だと 「余白ってスキマのこと？ 白い部分のことだよね？」 という回答が出てくるかと思います。 そうです、あってます！ それこそが余白！ だがしかし字面通り「あまっているスペース」扱いされている余白… そんな余白には見た目や読みやすさを左右する大きな役割があるんです。 というわけで余白の私が気をつけている余白づくりのポイント〈初級編〉 簡単に挙げていこうと思います。 1. 余白の役割先ほど挙げたように「あまっているスペース」と見られがちな余白。 けれど余白は様々な役割を担っていて、デザイナーはその余白を常に意識しながらデ
Search, discover, test and create beautiful color palettes for your projects
Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。 そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く（人のこと言えないですが......）、初心者にはUIデザインのツールとしてはまだまだ馴染みの薄いツールなのかなと思います。 というより、昨今はデザインツールが多すぎてシンドいことこの上ないですね。一度効率化の味を知ると更なる効率化を追い求めてしまいますし、そんな現状だと日頃から使用しているツールを変えるのも一苦労です。 ......さて、今回は初心者〜中級者くらいまでに向けてFigmaで作るUIデザイン入門的な記事を書いていこうと思
原文："Building a large-scale design system: How we created a design system for the U.S. government" by Maya Benari, October 3, 2017 現在、ほぼ30,000の米国連邦政府のウェブサイトがありますが、それらウェブサイトの間に一貫性はほとんどありません。テクノロジーの分野で働く数十万人の政府機関の職員がいますが、彼らの携わるウェブサイトの構築や管理方法に共通点はありません。 その結果、政府はユーザーが十分に満足できないサービスに多くのリソースを費やしています。連邦政府のウェブサイトは行政が提供するサービスの正面玄関です。アメリカ政府と何らかの接触をはかるときユーザーが最初に出会う場所です。米連邦政府一般調達局のFederal Front Doorイニシアチブの調査からウ
アプリデザインのトレンドは絶えず変化しています。時間が経てば消えてしまうものから、成長し、進化を続けるものもあります。多くのトレンドは検討する価値がもちろんありますが、一緒に新しい技術も必要となります。 優れたUIデザインは、シンプルさ（英: Simplicity）と有効性（英: Effectiveness）が全てです。これこそがデザイナーが機能性を達成しようとする理由です。しかし反対に、もしユーザーがアプリをうまく使いこなせないとき、UIデザインは失敗と言えるでしょう。 デザイントレンドが変化する理由にはさまざまな要因が考えられます。たとえば2015年の大きな流れとして、ハードウェアの変化やモバイル端末のレスポンシブ化が挙げられます。 公開された多くのモバイルアプリは、人気のある機能を必需品としてすぐに変化させてきました。さらに今では若者のおよそ90%が、モバイル端末上で基本的な操作を行
デザインの細部は宿ると言われており、細かな部分が全体なクオリティに繋がってくるものですが、WEBデザインも同様に細かな背景やパーツを作り込むことでクオリティが上がってきます。今日紹介するのはデザインのクオリティを上げるシンプルな背景パターン「75 Seamless Photoshop Pixel Patterns」です。 非常にシンプルですが、基本的にはシンプルですが中には少し遊びのあるピクセルパターンが全部で75種類まとめられています。 詳しくは以下 非常に利用しやすそうなパターンファイル。シンプルなだけに汎用性がかなりありそうで制作の現場でも活躍してくれそうです。 配布ファイルはPhotoshopのパターンファイルとなっており、基本的にはphotoshopが入っていればダブルクリックすれば登録されるようになっています。もう少しだけデザインに質感を持たせたいという方は是非どうぞ。 Del
99designsのこれまでの成長ぶりから判断して、今年は重要な年になりそうです。本サイトはかつてないほどの速さで進化を遂げているので、ぜひデザイナーの皆さんも一緒に成長してほしいと願っています。 優れたデザイナーになる12の方法を紹介しますので、毎月1つ試してみてください。新しいスキルを学び、新たなヒントを生かしていくことで、さらに優れたデザイナーになりましょう。 1. グリッドの使い方を習得する — ウェブサイトであろうと印刷物であろうと、デザインする上でバランスのとれたレイアウトを決定することは、最も難しく、非常に悩ましい作業の一つです。しかし、この問題はグリッドがあっという間に解決してくれます。グリッドを使えば、いつもの試行錯誤を繰り返すことなく、レイアウト作業を系統立てて行うことができるのです。 この方法なら、グリッドに沿ってレイアウトを決めていけばいいので、コンセプトやタイポグ
Webデザインには人々の興味を惹きつけるため、各企業とも色々な手法を用いてユーザーの興味に訴えかけています。大胆に大きいイメージを全面に打ち出したwebサイトなど、2016年5月現在、webデザインのトレンドとなったサイトをご紹介いたします。 クオリティの高い画像を大胆に打ち出したサイト Summer Fridays - Summer Fridays Allbirds Elijah Kukharev - Web Deisgner & Art Director たくさんの画像や動画を用いたwebサイトがまた人気が出始めてきています。大きな画像を用いることによってサイトコンテンツの魅力を最大限に引き出し、ユーザーの興味を惹きつける効果があるとされています。しかしながら、画像のクオリティが最大のファクターであり、画像の質には最大限に力を入れるべきでしょう。 ここで、少し注意しておきたい点をまとめ
はてなでブログを書き始めて2週間ほど経過したのだけれど、ブログを始めると書く内容そっちのけでやたらとデザインにこだわりたくなることがある。 特に、ホットエントリーを覗いてみると、内容はもちろんすばらしいものばかりだけれど、なかにはデザインが素晴らしいサイトもあって、魅了されることがある。 どんなふうにデザインしたのか、どういう思考回路になるとこんなデザインが思いつくのか、などなど。 デザインはデザイナーの既得権益・不可侵領域はなく、万人が自由に扱えるものだ。そして、デザインはセンスではなく理論(theory)だ、ということも以前書いた。 デザインを勉強すれば、ブログに手を加えたり、自分で名刺を作ったり、部屋をお洒落にコーディネートしてみたり、いろんなことができる。 ブログでいえば「Webデザイン」というジャンルから始めるのが定番ではあるのだけれど、これからデザインを始めるひとにはぜひ「グラ
最近のWebのUIデザインで採用されているさまざまなナビゲーションの名称とその役割、使う時のポイントを「Web UI Design Patterns 2016」から紹介します。 検索のナビゲーションは、ユーザーが特定の何かを探していて、それがどこにあるか分からない時に直接その何かにアクセスすることができます。 最も基本的なパターンはメインのナビゲーションに検索のオプションとして含めることで、右上に配置するのが人気です。虫眼鏡アイコンを添えたり、ドロップダウンで拡張した検索機能にしてもよいでしょう。 Notifications: 通知 ユーザーが何らかの操作をした時、もしくは新しい内容を伝える時に知らせることができます。 通知が普及したのは、ソーシャルメディアサイトにおけるプッシュコンテンツの影響が大きく、他のサイトでも通知を利用して新しいコンテンツやプロダクトやコメントを知らせるようになり
前回、WEB上で画像やテキストなどのカラーを識別できるGoogle Chromeの機能を紹介しましたが、今回は色を識別してから、 色彩センスがないけど、きれいな配色が作りたい！！ この色には何色と合うんだろう？ とお困りではないですか。 【色を識別する記事】これ何色？画像やテキストなどWEB上の色を簡単に識別するGoogleChromeの機能 今回は、どんな色か特定できてもその色がどんなものなのか、相性の良い色はどの色なのか、配色を検討する参考にできる無料のオンラインツールを紹介します。 紹介する記事の中でこのサイトのロゴなどのテーマカラー「#d86e3a」をもとに紹介します。 簡単にきれいな配色デザインが作れるColorHexaって？ 前述していますが、「どんな色か特定できてもその色がどんなものなのか」、「相性の良い色はどの色なのか」、配色を検討する際に参考にできる無料のツールで、色彩セ
WebサイトやアプリなどのUIデザインのアイデアに困った時の参考に、そして勉強になるサイトを紹介します。 ページのレイアウト、UIのさまざまなコンポーネント、動きが気持ちいいアニメーション、実装のテクニックなど、定期的にチェックしておきたいサイトばかりです。 UI Patterns ページのレイアウト、ナビゲーション、データコンテンツ、フォーム、ユーザスクリーンなど、インタラクティブ性の高いUIデザインのさまざまな事例から、UIの問題を解決するデザインのパターンが紹介されています。 ローンチして間もないサイトですが、内容は非常に充実しています。 Collect UI DribbbleでUIデザインを探す人には、かなり便利です。日々アップロードされるDribbleのアートワークのUIデザインに関するもののみをコレクションしているサイトです。 このサイトもローンチしたばかり、登録数は2,000
こんにちは、デザイナーの藤田です。 デザインをやっていると、見出しのデザインに悩むことって結構ありますよね！ 自分のデザインストックを増やすためにも、今回のブログでは今っぽい見出しデザインをタイプ別にまとめてみました！ 独学でつまずいていませんか？ 現場で活かせるWebデザインを効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。 詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） ※この記事は2022年3月に編集部が情報を更新しました ジャンプ率パターン ミニマムなデザインでは見出しに過度な装飾を加えずに、本文に対し見出しの文字サイズを大きくすることで見出しを目立たせるサイト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
