マガジンのカバー画像

デザインTopic

21
運営しているクリエイター

#デザイン

結婚式で顔出しが嫌すぎて、オリジナルキャラクターをデザインしたらかなり良かった (作ったアイテムも紹介します)

結婚式で顔出しが嫌すぎて、オリジナルキャラクターをデザインしたらかなり良かった (作ったアイテムも紹介します)

「結婚式のペーパーアイテムとかに顔を載せるの、私たちにはハードルが高い……」
私と夫が結婚式準備中に思っていたことです。

人前に出るのが嫌なのではなく、印刷物や装飾にキマっている自分が載るのがなんとなく気恥ずかしい。
しかし、せっかくのパーティを華やかなアイテムで彩りたい……どうしたものか……

考えた末、二人をモチーフにオリジナルキャラクターをデザインして使うことにしました。
幸い、妻である私

もっとみる
チーム安野のデザイナーが見た都知事選。選挙に必要な制作物まとめ【保存版】 #安野たかひろ

チーム安野のデザイナーが見た都知事選。選挙に必要な制作物まとめ【保存版】 #安野たかひろ

安野たかひろ事務所 デザインチームリーダーの山根です。

都知事選から10日間が経ちました。残念ながら当選には至りませんでしたが、地盤看板のない無所属新人である安野たかひろが、マスコミが決めた「主要候補4人」に次いで5位/15万票超という得票をいただけたことは、一つの大きな意味ある成果だったと思っています。ご支援をいただいた皆様、ボランティアの皆様、本当にありがとうございました。

この記事では、

もっとみる
ページに抑揚をつける「背景切り替え」のデザインアイデア

ページに抑揚をつける「背景切り替え」のデザインアイデア

こんにちは!
株式会社Rabeeでデザイナーをしています、nanamiです🌿

Webサイトのデザインを作っていく時、気づいたら単調なデザインになってしまうことはありませんか?

「Webデザインはリズムが大事」とよく言いますが、リズム良く眺めることができるWebサイトって、つい上から下までスクロールしてしまいますよね。

今回は、そんなリズム感を生む工夫の1つ、背景の切り替え方に着目して分析し

もっとみる
ヘッダー(グローバルナビゲーション)のデザイン事例100選

ヘッダー(グローバルナビゲーション)のデザイン事例100選

こんにちは!株式会社Rabeeのデザイナーのakaneです🐏

今回は、ヘッダー(グローバルナビゲーション)のデザイン事例を調べてみました!パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍

はじめに:グローバルナビゲーションとは?グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。

一般的には画面上部のヘ

もっとみる
「CTAボタン」のUIを集めてみた|パーツ別デザインまとめ

「CTAボタン」のUIを集めてみた|パーツ別デザインまとめ

こんにちは!株式会社Rabeeでデザイナーをしています、nanamiです。

今回は、LPにおいてCV(コンバージョン)に大きく影響を与えるUIパーツ「CTAボタン」周りのデザインをパターン別に集めてみました。

はじめに前回の記事で予告をした通り、今後、LPやWebサイトを構成する様々な要素を1つずつ特化して調査をしていきたいと思っています。
今回はその「パーツ別デザインまとめ」シリーズ2本目で

もっとみる
変なサイトに登録しなくても、Figmaで使えるシンプルで高品質な無料テンプレート集(UIメイン)

変なサイトに登録しなくても、Figmaで使えるシンプルで高品質な無料テンプレート集(UIメイン)

どうも!
MoQupの原田です。

noteを初めてもうすぐ連続投稿30日なのですが、始めの月である今月は、記事の形を色々試していて、皆さんからのフィードバック、いつも楽しみにしております。

今回は、「ただ単にFigmaでパッと使える無料素材が欲しいんだけど、変なサイトに飛ばされて、登録を求められるのが面倒」というめんどくさがりな人向けにFigmaコミュニティ上で公開されている高品質の無料素材を

もっとみる
エンジニア直伝!デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法

エンジニア直伝!デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法

こんにちは、@ShikiCheriです。
現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。

デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…!?クックパッドは25年のサービスの歴史があり、特にWeb版は今でも現役で活用されているサービスです。私はこの長寿サ

もっとみる
Webサイトのメインビジュアルの構図を集めて分析してみた。

Webサイトのメインビジュアルの構図を集めて分析してみた。

初めまして、ameko(@tk04amedama)と申します。
普段は都内の制作会社でWEBデザイナーをしています。
と言ってもまだまだ新米なので、日々勉強中です。

その勉強の一環で、最近のWebサイトで使われている
メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみよ

もっとみる
アメリカと日本で違うピンタレストのUIを分析

アメリカと日本で違うピンタレストのUIを分析

ピンタレストアプリのユーザー登録画面が、アメリカと日本でかなりUIが違ったので、分析していきたいと思います。ちなみに、ピンタレストはユーザー登録画面以外は基本的にアメリカと日本でUIが同じみたいなんです…。不思議です。

入力ステップの表示の仕方が違うアメリカと日本では、入力ステップの表示の仕方でいくつか違いがありました。

アメリカ
・ステップバーで進捗を表示
・テキストで「1 of 3」と補足

もっとみる
実案件から学んだ、本当に役立つUIデザインの法則50 ユーザビリティチェックリスト総集編

実案件から学んだ、本当に役立つUIデザインの法則50 ユーザビリティチェックリスト総集編

こんにちは!i3DESIGNデザイナーチームです。
今日は、私たちが様々なクライアントのプロダクト・サービスの改善を行っていく中で得た、ユーザビリティを改善するためのヒントを50個シェアしていきたいと思います。

マガジン「ユーザビリティチェックリスト」01〜09ののまとめ記事です。

「ユーザビリティチェックリスト」ということで、UIデザインの「あるある」を取り上げ、改善案とセットでまとめていま

もっとみる
「ザ・青空」じゃない空のグラデーション素材、無料配布します

「ザ・青空」じゃない空のグラデーション素材、無料配布します

下の図ですが、これ、ぜんぶ空の色です(自分のInstagramにアップした、空映ってる写真から色を抽出しました)。思った以上にいろんな色あるなぁと気づかされます。配色するとき、色のもつイメージを基準にすることはもちろん大切ですが、固定観念だけでなくその場の「空気を捉える」ことも必要だなと思いました。

これらの色をもとに、グラデーションのパターンを作りました。

配布してほしいという声もいただいた

もっとみる
Figmaを使った謎解き風練習ファイル!Figma World 第1章 旅に出よう

Figmaを使った謎解き風練習ファイル!Figma World 第1章 旅に出よう

久々投稿のタクトです!

今回の記事では
Figmaの練習ファイルについてご紹介しようと思います。

webデザインをするにあたって、いまは色んなツールが出てますね!
自分がいま勤めている会社でもPhotosohpやXdなどでやってきてましたが、
Figmaに徐々に移行することになり、新たに勉強しはじめました。

そんな折、Figmaは英語のUIだったりして
始めるまでのハードルが若干高いといった

もっとみる
【随時更新予定】推しのFigma Pluginまとめ

【随時更新予定】推しのFigma Pluginまとめ

こんにちは、株式会社アトラエでデザイナーをしています三上蒼太(@sota_mikami)です。

弊社ではデザインツールとしてSketchとFigmaを使っています。
どちらも併用していますが、個人的な好みはどちらかと言えばFigma(前職で使い倒していたので)。

この記事では、そんなFigmaの推しPluginをまとめていきます。
気分次第で随時更新予定です。

Unsplush説明する必要も

もっとみる
レイアウトデザインの視点を増やす思考&Tips

レイアウトデザインの視点を増やす思考&Tips

はじめにこのnoteは、私がTwitterで発信した「デザインの思考&Tips」のなかから、レイアウトデザインに関する内容を編集してまとめたものです。普段のデザイン業務で私が意識している、webデザインを中心としたレイアウトの考え方やTipsを紹介します。

「レイアウト」といっても、ただ単にドキュメント上に要素を置くのは誰でもできます。どんな素材にするか、どんな動線にするかを考えて位置を決めてい

もっとみる