マガジンのカバー画像

test1

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

#Webデザイン

一体どこからインスピレーションを受けるの? 前もって知っておけば良かったデザインサイト10選!

一体どこからインスピレーションを受けるの? 前もって知っておけば良かったデザインサイト10選!

こんにちは、デザイナーのchoiです。
皆さんは作業を始める時、何から始めれば良いのか分からなくて困ったことがありせんか?

ピカソはこういう言葉を残しました。

腕がよいアーティストはコピーするが、偉大なアーティストは(インスピレーションを)盗む。(Good artists copy, the geniuses steal.)

つまり、優れた作品を創造するためには、たくさんの作品からインスピレ

もっとみる
【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新

【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新

こんにちはデザイナー社長の船越です!久々のnote投稿ですが、ツイッターを見ていてデザイナー初学者の人から

「どこから画像を引っ張ってくればいいかわからない😭」

「日々の情報収集どうすればいいの?🤔」

という悩みをよく見かけます。そこでデザインオタクの僕が、普段見ているサイトや参考になる選りすぐりの情報を全部まとめました!デザイナーのクオリティと速度は引き出しで決まると僕は考えています。

もっとみる
Webサイト分析まとめ

Webサイト分析まとめ

少し前の話になってしまうが、デザインの勉強の一環として、Webサイトのトップページを毎日1サイト分析し、それを簡単にまとめてTwitterでつぶやくという習慣を約一か月ほど続けていました。

分析したサイトは全部で17サイト。その17サイトを分析する中で気が付いたことをメモしてあったので、自分用の備忘録として改めてまとめ直してみました。

こんな感じで1枚の画像にまとめて呟いていました。

ヘッダ

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

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

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

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

もっとみる
Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開く前の3ステップ

Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開く前の3ステップ

先日1500ページくらいのやや大きめなコーポレートサイトのワイヤーフレームをディレクター、デザイナー、テクニカル担当、アシスタントという職能や経験もバラバラのチームで共同作成しました。みなが足並みを揃えて進めていけるようにワイヤーフレームの作り方を要素分解して、共通理解を持って作業をできるようにしました。どのような手順や考え方で進めていったのかをnoteにも記しておきます。

0. 情報設計とトン

もっとみる
デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント

デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント

webやアプリのUIデザイン上達のコツとして、模写(コピー)がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践!となった時に多くの学びを活かせたと記憶しています。

そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところ

もっとみる
Webflowのはじめかた

Webflowのはじめかた

年末にシェアされてたこちらの記事が気になってたので、No Code(コードを書かずにぽちぽちでプロダクトが作れる)ツールを使って、奥さんの実家の酒屋さんのサイトを作ってみました。

- Lottieアニメーション組み込み
- CMSブログ機能
- Scroll付随アニメーションの組み込み

がざっくり実装要件でした

が、3時間もかからず、

思いのほか、自由度高く作れて、「ああ、これは近い将来w

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

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

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

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

もっとみる
広告で学ぶ!デザインの基本原則

広告で学ぶ!デザインの基本原則

「デザインをどうやって勉強すべきか?」WEBやグラフィックのデザイナーを目指している人に共通の悩みだと思います。

「デザインの技法」については、結構書籍も出てきています。しかし、デザイン勉強中の人が、技法とデザインと結び付けて考えるのは難しいようです。

そこでTwitterの投稿「#広告からデザインを学ぼう」シリーズで紹介した、レイアウトや配色などの「デザインの基本原則」をnote用にまとめま

もっとみる
"Neumorphism" なるUIデザインのトレンド

"Neumorphism" なるUIデザインのトレンド

「新しいスキューモーフィズム」を謳う "Neumorphism" というデザインが最近一部で提唱されているようです。

Skeuomorph Mobile Banking by Alexander Plyuto

この例のようにボタンやカードなどの要素が凹凸で表現されていて、明るい影(光)が落とされているのが特徴です。それによってボーダーや塗りを使わずに要素の形状を表します。

Neumorphi

もっとみる
Webデザインについて#1「コンテナという概念」

Webデザインについて#1「コンテナという概念」

前回のお話と前置きこのシリーズは「グラフィックデザイナーがWebを学んでみて」というテーマで不定期連載しております。このマガジンに今後もストックされていきます。

初回では
-デザインとは?
-紙とWebの違い
についてまとめました。

今回はWebデザインを行う上での基本的概念の「コンテナ」についてまとめます。これはデザインのみでなくコーディングにも通ずる考え方です。前回の記事で書いたようにWE

もっとみる
デザインで迷った時
「そもそも」を考えれば8割クリアできる説。

デザインで迷った時 「そもそも」を考えれば8割クリアできる説。

よく仕事でデザインをしてて
迷う事ってあるんじゃないでしょうか。

「レイアウトは1カラムで行くか、無難に2カラムにするか」
「コーラルピンクだとオシャレだけど弱い、ただ普通のピンクだと強い」
「この要素はどれだけ大きく配置すべきか」

僕はあります。80代のジジイの頻尿並みにあります。

そんな時、大概の場合は今から説明する
「そもそも論」に則って、考えれば8割は解決できるように思うので
ご紹介

もっとみる
BtoCのLPを成功させる為の20項目

BtoCのLPを成功させる為の20項目

こんにちは、LP制作と運用に強い制作会社nanocolorの川端(@nanocolorkwbt)です。

今回の記事でのLP(ランディングページ )とは、BtoCにおける商品購入の決済完了を目的としたLPのことです。BtoCはBtoBに比べ、比較検討期間の短さや意思決定者の少なさ、合理性よりも情緒が優先されるなどの特徴があります。

「売れたLP」か、それ以外か。
弊社にご相談いただく時に聞く言葉

もっとみる
デザインの敗北事例集~人に伝わらないデザインは死ぬ~

デザインの敗北事例集~人に伝わらないデザインは死ぬ~

ヒトに伝わらないデザインは、いとも簡単に死んでしまう。

オシャレでカッコよく、綺麗で鮮やかなデザインを作り、自分もクライアントも満足したとしても、機能性が無いデザインは簡単に死ぬのだ。

今回はそんな「デザインの敗北」事例を10個程度ご紹介しよう。

※反対の「デザインの勝利事例集」記事はこちら

1.東京ミッドタウン日比谷のトイレ前わかりやすいデザインの敗北事例である。
どう見てもトイレを示す

もっとみる