この計画はデザイナーの 広野 萌 が自らのデザイン会社においてインターンを育てるために2021年3月から試験的に始めたもの。

【デザイン初心者向け】入社して初めて作成したアイキャッチ、先輩からのフィードバックをすべて公開します！ こんにちは！ そして、初めまして！ 今年の6月より社内制作チームのデザイナーとして入社しました、えびちゃんと申します。LIGのデザインスクール「デジタルハリウッドSTUDIO by LIG」でWebデザインを学び、未経験でLIGに入社いたしました！ 社内制作チームでは、LIGブログの記事の一番上やサムネイルとして表示される画像（アイキャッチと呼んでいます）やバナーなど、社内で使用する制作物を作成しています。 私が入社して初めて作成したのは、「現役デザイナー厳選！デザインを勉強したい人におすすめの本23選」という記事のアイキャッチでした。このアイキャッチ制作には、デザイン初心者が陥る悩み・学びがたくさん詰まっていました。そこで、先輩デザイナーからフィードバックを受け完成するまでの過程を共有

こんにちは！ Webデザイナーのおまめです。 私は実務未経験でWebデザイナーとして採用してもらったのですが、「美大も出てないのにどうやってWebデザイナーになったの？」と聞かれることが多くなってきました。 そこでこの記事では、私が全くの初心者から独学でWebデザインを勉強した方法や、Webデザイナーになるまでの過程を詳しく紹介します。また、未経験からWebデザイナーになった友人や先輩の体験談を集めて、叡智を集結させました。 独学でWebデザイナーを目指したい人はもちろん、副業でWebデザインの仕事がしたいという人にも必ず役立つ内容になっているので、ぜひ最後までご覧ください。 スクールに通う場合は…… 「デジタルハリウッドSTUDIO by LIG」では未経験から6ヶ月で「現場レベルの」Webデザイナーを目指せます。働きながら学ぶ社会人も多数です！ 「デジタルハリウッドSTUDIO by

ダウンロード時にゲージが最大まで行っても終わらず、何度も繰り返されるアニメーションはよく見かけます。 これは後どのくらいで終わるのか目安がわからないため、やめて欲しいものになります。 心理学的には導入の動きを早くすることで体感速度を短くする効果あがあるようですが、今は後どのくらいで終わるのかという時間を知ることの方が優先度は高くなっています。 一度ゲージが100％まで行ったらダウンロード完了とシンプルにするか、または数字でトータルどのくらいかがわかるといいですね。 主張の激しいページ送り 動きはとても目を引いてしまうため、文字を読んでいる最中でもページ送りのマークに強制的に目がいってしまうことや、早くボタンを押さなければいけないと焦らせる効果があるため、ページ送りのアニメーションの主張はさりげなく次へ進めることがわかれば良いです。 文字を読ませることがメインのゲームではなく、たまにしか無い

UXデザインとは実際何なのでしょうか？UXデザインの仕事を探すときや、UXデザインとは一体何なのかを理解しようとするときに使えるような、わかりやすいUXデザインの定義はないものでしょうか？今回は、ドイツのベルリンに拠点を置くイノベーションスタジオ AJ&Smart の動画「UXデザインとは？」を翻訳してご紹介します。※翻訳・記事掲載は許諾を得ています。(Thank you, AJ&Smart !!) 以下翻訳内容です。 僕の名前は、ジョナサン・コートニー。 かなりの数のUXデザイナーを雇っていて、僕自身もUXデザイナーだ。これからUXデザイン(UXデザイナー)とは何なのかについて話していくよ。 UXデザインの定義について 始めに簡単に「公式」のUXデザインの定義を確認しておこう。個人的にはこの定義は役立つものとは思わないし、特段実用的なものだとも思わない。けど「公式」とされるものが、どうい

多くのサイトは脱Flashの流れのなかにあり、従来Flashで作られていた表現の多くはHTML5へ移行が進んでいます。使われている技術は変われど、アニメーションを心地よく見せる技やユーザーを楽しませる要素は普遍的なもの。かつて話題になったFlashサイトから得られるものは多いはずです。 2017年7月26日（水）、ブラウザプラグインのFlash Playerが2020年末に終了すると、アドビが発表しました（参照「Flash とインタラクティブコンテンツの未来 | Adobe.com」）。Flashサイトがブラウザで見られなくなってしまうまでに見納めするべきサイトをまとめました。 FONTPARK 2.0 | MORISAWA 別ウィンドウで開く フォントメーカー「モリサワ」のウェブサイト（2008年公開）。文字のパーツを組み合わせてオリジナルのイラストを作成し、作品として投稿・共有できます

Service Design Advent Calendar 2017に、ちなんだ投稿です。 はじめまして！オリジナルライフという会社を運営してる榎本です。 「消費者ジャーナリズムで産業の進化に貢献する」を会社のコンセプトにしています。実際にお金を払ってる消費者の当事者としての生の声や体験レポートの可視化を頑張っています。消費者ニーズによりそった先進的なサービスをやってる会社が勝ちやすく、チートを行なっている会社が勝ちにくくなる＝『産業のサービス品質全体が進化する』世界を実現したいと思っています。 お手本にしてきたのは、情報誌時代のリクルートのサービスデザインなんですが、全くもって真逆のメディアに見える、「暮しの手帖」が、『ユーザーニーズの可視化で産業の進化に貢献している』という点で共通だったのが、衝撃だったので、ここにご報告させていただきます。 暮しの手帖のすごさ①商品テストがすごい こ

私たちは普段、お店でものを買う際には必ず「お金を払う」ということを行っています。現金やクレジットカード、交通系電子マネーに加え、最近ではApple Payなどのスマートフォンによる電子決済サービスも登場しています。そのような新しい決済サービスを使ったことがあるという方も増えてきているのではないでしょうか。 このブログでも度々注目されているお金とデザインのこと。先日起こった私の実体験を通して、このような「お金を払う」という体験のデザインについて考えてみたいと思います。 とあるコーヒーショップでの体験談：フィードバックの勘違い これは、とあるコーヒーショップでバーコード決済アプリを利用した際に体験した実話です。 さて、3コマ目で私はなぜ「会計が終わったな」と勘違いしてしまったのでしょう？ 振り返ってみると、会計時に私はこんなことを考えていました。 1コマ目：「電子決済アプリで支払いたい」 2コ

今回は、GoodpatchのUIデザイナーにヒアリングし、UIデザインを理解するためのおすすめ本をまとめました。 次のような人に特におすすめです。 UIデザイナーになったばかりの人 もっとUIデザインについて勉強したい人 サービス、アプリ開発に携わるエンジニア・ディレクターの人 目的別に6つのカテゴリに分けてご紹介します。あなたの関心に沿ったトピックから、 気になる本を見つけていただけると嬉しいです。 1. UIデザインを基礎から理解する ユーザーインターフェース（UI）とは何なのか、どんなデザイン要素があるのか、UIが機能する環境とは？、どうやって作ってリリースするのか…UIデザインを始めるために、まずは基礎知識を網羅しましょう。 ■ はじめてのUIデザイン 改訂版 この本は、著者の1人である吉竹遼さんが「UIデザインを体系的に学ぶための本が少ない」という課題感から企画されました。そのた

ラジオボタンはフォームにおける必須要素です。互いに相容れない２つ以上のオプションがある時に使用され、ユーザーは正確に１つの選択肢を選ばなければなりません。言い換えれば、選ばれていないラジオボタンをクリックすることによって、選んでいた他のどんなボタンも選ばないということになります。 ラジオボタンは正しく使用されれば素晴らしいものです。ユーザーが間違ったデータを入力するのを防ぎます。キーボード・ナビゲーションやプラットフォームを通じた信頼できるレンダリングなど、多くの選択肢を提示してくれます。 本稿では、ユーザビリティ・テストによって巧みにつくられたラジオボタンに関する実用的なガイドラインをご紹介します。 ラジオボタンの名前の由来 古いカーラジオにおいて放送局を変えるために使われたことにちなんでラジオボタンと呼ばれるようになりましたが、このボタンは１つ押された時、別の１つは飛び出すようになって

この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では

先進33か国において、コンピュータ関連の高い能力を持つ人は人口の5％にすぎない。また、中程度の複雑度のタスクを完了することができる人は全体の3分の1しかいない。 The Distribution of Users’ Computer Skills: Worse Than You Think by Jakob Nielsen on November 13, 2016 日本語版2017年3月16日公開 身につけるのがもっとも困難なユーザビリティの教訓に、（訳注：デザインプロジェクトに携わっている）「あなた方はユーザーとは違う」というのがある。これこそがユーザーのニーズについての推測が大失敗に終わる理由だ。デザイナーは大半のターゲットオーディンエンスとあまりに異なっているため、いいと思っているものや利用しやすいと思っているものが見当違いになるだけでなく、そうした自分たちの個人的好みによって判断す

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

Easily find the best Material color for your projects. Here is 30 color combination based on material design color palette. By clicking color sample bar, You can check usage example in material design UI. Each of color combinations consists of following three kinds of colors. (1) Main (2) Optional (3) Accent For details, see Google Guideline. Contents

レスポンシブサイトのHTML、CSSの作成方法を、初心者にも分かるように説明。サンプルコード、テクニックなど。

About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-

スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ

by Jorge Quinteros 「1つのスクリーンにつき1つのタスク」「プッシュ通知の利用の仕方」「余白を作ること」など、ソフトウェア開発者のNick Babichさんがモバイルアプリ作りで押さえるべきUXデザインの7つのポイントをまとめています。 Mobile Design Best Practices http://babich.biz/mobile-design-best-practices/ ◆1：1つのスクリーンにつき1つのタスク 配車サービス「Uber」のアプリを見てみると、非常にシンプルな作りになっているのがわかります。Uberを使う人の目的は「タクシーを捕まえること」とはっきりしているため、アプリの画面にはユーザーの現在地が自動的に表示されるだけで、ユーザーがすべきことは「タクシーに乗る場所を選ぶ」ということのみとなっています。 アプリを理解しやすくし、操作を簡単にす

webサイトやアプリなどのUIデザインに悩んだときに参考になるデザインギャラリーを全20サイト紹介します。 よくあるコンポーネントのデザインや配置の仕方、カラーの組み合わせ方を眺めるだけでなく、ギャラリーによってはクールなものからユニークなものまである様々なアニメーションをまとめているところもあるので、デザイン以外の部分でも参考になるギャラリーもいくつかあります。 また、悩んだ・困ったときに見るだけでなく、お気に入りのギャラリーがあればブックマークやフィード登録などして普段から空いた時間に目を通すことでデザインの引き出しも増やせますね。 Calltoidea 細かいコンポーネントからページ全体のレベルまで様々なデザインがまとめられています。 カテゴリーを表すアイコンもわかりやすく参考デザインのキャプチャも大きくて見やすいので、個人的によく見るギャラリーサイトのひとつです。 Collect