ColorMagic - Color Palette GeneratorGenerate color palettes with AI. Enter any keyword and generate a matching color palette.
元デザイナー採用担当が教える、選考通過率の高いポートフォリオ作成術
ここ最近、転職するにあたって約10年ぶりにポートフォリオを作りました。私は元々ポートフォリオ作りが苦手で、力が入りすぎていつまでたっても完成しない…といった状況になりがちだったのですが、今回はわりとすんなり完成しました。 その理由は、ここ数年でデザイナーの採用に関わり、採用担当者の目線で沢山のポートフォリオに目を通す機会が増え、作成において気をつけなければならない点がなんとなく分かるようになったからだと感じています。 そこで今回は、こんなポートフォリオなら選考を通過しやすいのでは？と思うことをまとめてみたいと思います。尚、考え方は企業や採用担当者によって異なるので、あくまでも個人の考えとしてご参照ください。 作成前に踏まえておきたい認識 そもそもポートフォリオとは まず辞書で「ポートフォリオ」の意味を調べてみると、「紙挟み」「折鞄（おりかばん）」とあります。これは書類をまとめて入れておくケ
Web制作が捗る！おすすめのChrome拡張機能18選【2021年版】 | Web Design Trends
Web制作や情報収集など、Google Chromeをメインブラウザで使用している方はとても多いと思います。 Chromeの便利な機能の1つが拡張機能ですが、きちんと活用してますか？拡張機能を活用することで、Web制作業務が効率化されたり、日々の情報収集が行いやすくなったりします。 今回は、Web制作者やデザイナー向けのGoogle Chromeのおすすめ拡張機能をご紹介したいと思います。 Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活... Web Design Trends
課金 UI まとめてみた｜あき - 良いもの作って正しく届ける
売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい！ コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限
配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki Ikeda｜note
どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ
路線図をゼロから作り直してデザインを学ぶ授業 :: デイリーポータルZ
1975年宮城県生まれ。元SEでフリーライターというインドア経歴だが、人前でしゃべる場面で緊張しない生態を持つ。主な賞罰はケータイ大喜利レジェンド。路線図が好き。（動画インタビュー） 前の記事：ビジネスホテルのこだわり大全〜実践編〜 ＞ 個人サイト 右脳TV 路線図で「コミュニケーションデザイン」を学ぶ というわけで千葉大学にやってきた。正確には千葉大学工学部。最寄りはJR西千葉駅である。 門の前で待っていたら歩道をテレビクルーが通り過ぎていった。『月曜からよふかし』の総武線ロケだろうか。 「コミュニケーションデザインⅣ」講義を担当する大森正樹さん。大学教授ではなく、鉄道会社JR西日本の方である。なぜ鉄道会社JRの人が大学で？というのは後ほど。 ひとくちに「デザイン」と言ってもいろいろある。 図形とか模様とかに限らず、建築も衣服もWebも工業製品もみんなデザインだ。「私もサザエさん、あなた
作りたいWebアプリのアイディアを迷走せずに作る方法。まず、エディターを閉じることから始めよう - Make組ブログ
何かを作りたいときは、エディターをいきなり起動してはいけません。 エディターを閉じて、まずはイメージをまとめることに集中しましょう。 なぜこの文章が必要か なぜ何かを作る前にイメージをまとめる必要があるのでしょうか？ 頭の中には完璧な作りたいもののイメージがあることでしょう。 であれば今すぐにでもプログラミングを始めるのが賢明なように思えます。 ですがそうしてはいけません。理由は「作りたいもののイメージは単なる幻想だから です」。 頭のなかにあるイメージはとても素晴らしいものですが、多くの場合は曖昧で、触れられない、価値を検証できないものです。 それを一旦書き出して、まとめていく方法を知っておきましょう。 まとめていく中で作るものがより明確になり、自分でも気づかない価値を発見できます。 作るものをまとめて検証することで、作り始めた後の手戻りを防ぎます 作るものをまとめて明確にすることで、作
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
任天堂が新人研修で伝えている、あそび心のデザイン｜娯楽のUI 公式レポート #1 | キャリアハック（CAREER HACK）
任天堂の新人研修で語られているのは「あそび心を伝える」という大切さについて。『スーパーマリオメーカー』を例に、UI/UXデザインチーフである正木義文さんが語ってくれた。 [目次] ・「みなさんとクイズをしたいと思います」 ・任天堂流「伝え方」のこだわり ⅰ教えるよりも体験してもらう ⅱファーストインプレッションを大事にする ⅲ体験は面白く ・わかりやすさと高機能を兼ね備えた、UIのデザインプロセス ・「あそび心を伝えるUIデザイン」3つのポイント ⅰUI脳と娯楽脳の二人三脚 ⅱ短所を「娯楽脳」で長所へ変える ⅲ将棋3席 麻雀5席 「みなさんとクイズをしたいと思います」 ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 「まずは、みなさんとクイズをしたいと思います」 そんな、あそび心溢れる一言で幕を開け
たった一人で神社のクラウドファンディングサイトを作った話し。あと神棚とかWebサービスとかWebアプリも作った話し。｜ビデ｜note
プロフィールにも書いてますが、僕の役職は社長と理事長です。 今日はその理事長の方のお話。 僕が代表を務めている法人は、一般社団法人神社崇敬会（すうけいかい）と言います。 先週、神社専門のクラウドファンディングサイトをスタートさせました。サービスの名前は『すうけい』と言いいます。神社の崇敬会や奉賛会（ほうさんかい）の設立や運営をサポートする仕事をしています。 ていうか『すうけい』ってなに？ 『ほうさん』ってなんやコラ。 という向きもあろうかと思いますので、最初にちょっとだけ。 崇敬会とか奉賛会ってなに？ 言葉の意味 崇敬・・・すうけい 奉賛・・・ほうさん 崇敬とは文字通り「あがめうやまう」こと、神社にお祀りされている神さまのファンになるということですね。奉賛とは神さまやお祀りしている神社の「おてつだい」をすることです。境内の掃除やお祭りの準備もお手伝いですが、神社の維持に必要なお金を寄付する
乃木坂46の公式サイトのリデザインで学んだこと｜Miyu Otsuki
先日、ふとしたきっかけで乃木坂46の公式サイトをリデザインを思い立ち、スキルアップの一環も兼ねてトップページをリデザインをしていました。 そのリデザインから学んだことなどをブログに書きたいと思っていたのですが、公式サイトに掲載されているコンテンツの著作権上、なかなか難しいかなと思い、念のため乃木坂46の運営委員会に問い合わせてみたところ、営利目的でなければ使用しても大丈夫（ブログの掲載も可）との許可をいただいたため、こちらに書くことにしました（2/9 16:43：問い合わせの内容は、公式サイトのお問い合わせフォームから送信したため、画像の添付などはしていません。コンテンツの掲載許可は頂きましたが、運営委員会に直接デザインデータを送ったわけではありません）。 なぜリデザインをしたいと思ったのかもともとアイドルが好きで、アイドルグループの公式サイトをチェックする機会が多いのですが、乃木坂46の
［CEDEC 2017］「ゼルダの伝説BotW」の完璧なゲーム世界は，任天堂の開発スタイルが変わったからこそ生まれた
［CEDEC 2017］「ゼルダの伝説BotW」の完璧なゲーム世界は，任天堂の開発スタイルが変わったからこそ生まれた ライター：西川善司 CEDEC 2017は，任天堂からの登壇者が例年に比べて非常に多い。数えてみると8件あった。「海外のカンファレンスでは登壇する一方，日本国内のカンファレンスにはあまり出てこない」という，これまでの傾向からは一転した新しい動向と言える。「ゲーム開発シーンにおける知見の共有」において，これまであまり積極的でなかった任天堂だが，意識を変えてきたのだろうか。 いずれにせよ，CEDEC 2017で任天堂は，「ゼルダの伝説 ブレス オブ ザ ワイルド」（Nintendo Switch / Wii U，以下，ゼルダの伝説BotW）関連セッションを4本も持った。今回はその中から，開発者でない一般のゲーマーにも分かりやすかったと思われる「『ゼルダの伝説 ブレス オブ ザ
UIのビジュアルデザインにおけるちょっとしたコツをまとめた「Little UI Details」
TightenやLaravelのデザインを担当したSteve Schoger(@steveschoger)さんによる、ビジュアルデザインにおけるコツをまとめたモーメント「Little UI Details」が公開されています。 Little UI Details https://twitter.com/i/moments/880688233641848832 明るい背景色上に白色のテキストを追加する場合、微妙に影を付けると、文字が見えやすくなるだけでなくよりポップになります。 Adding a subtle shadow to white text when on a bright background not only makes it more legible but helps it 'pop' more. pic.twitter.com/p9rudeFxvP— Steve Scho
Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ 無難で王道！正円の円弧を使った角丸border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すれば OK。半径 10px の正円の円弧をベースにした角丸
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Stable Diffusionで完全自動運転EVをデザイン 実車化へ
フラットなUIデザイン用に作成された、世界各国の有名デザイナーが使用しているカラーパレットのまとめ
https://simpleicons.org/
https://designer-draft.jp/articles/10
