マガジンのカバー画像

design

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

#Webデザイン

未経験者が制作会社に通い詰めて架空サイトデザインを作った話

未経験者が制作会社に通い詰めて架空サイトデザインを作った話

警察官を退職し、都内Web制作会社クオートワークスさんでインターン中のきのみです。

今回の記事では、未経験からwebデザイナーを目指し、制作会社に通い詰めて完成した架空サイトのプロセスを記録します!
完成したデザインの解説については、後日別でブログにします。

0.制作会社クオートワークスに通って完成した架空サイト先日歯医者の架空サイトのトップページをデザインしました。
こちらの実績にXで多くの

もっとみる
ボーイのサイトリニューアルVol.5 【コープ食品株式会社】

ボーイのサイトリニューアルVol.5 【コープ食品株式会社】

こんにちは。クオートワークス所属のワタナベ(@ws0606)です。前回から日が空きましたが今回も実在の企業サイトをモデルにリニューアルを行いました!今回は前回と違いヒアリングからデザイン作成まで、ムラマツさんノータッチで完全に自身の裁量で進めました。

前回ではデザインの反省も多かったため今回は初心に立ち返って、サイトトレースや分析の期間も挟んで挑戦しました。

題材にしたサイト

リニューアルし

もっとみる
デザイン迷子にならない旗を立てる

デザイン迷子にならない旗を立てる

Webサイトやアプリ、バナーをデザインをしようとFigmaやPhotoshopを開いたけど、そこから何をしていいか分からない。

そんなデザイン迷子の相談をよく受けるので、暗闇の中で助けになるコンパスを書き残しておきます。

結論から言うと迷子になるのは、進むべき方向を定めていないから。
デザインをするまえに必ずやらなければいけないことは、旗を立てることです。この辺りにゴールがあるよという、目印に

もっとみる
カルーセルの作り方 - Figma

カルーセルの作り方 - Figma

こんにちは、藤崎 猫です。
『FigmaでUIデザイン』という本を出版して、ブログでは本に入りきらなかったデザインノウハウや、Figmaの使い方についてお伝えしていきます。

今回のテーマはカルーセルの作り方です。FigmaでWEBデザインやUIデザインをしていると、カルーセルのUIをデザインすることもあるかと思います。しかし動的な要素だからこそ、実際に動かしてみないと良いデザインになっているかが

もっとみる
センスを鍛える、Webサイトのオリジナル化

センスを鍛える、Webサイトのオリジナル化

Webサイトを模写できたけど、オリジナル化でつまずく初級デザイナーさんは多いです。一番の課題は、オリジナル化する過程でクオリティが下がってしまうことでしょう。
ギャラリーサイトで掲載されるレベルのクオリティを保ったままオリジナル化するには、あなた自身のセンス(審美眼)を鍛えるしかありません。

まず、認識しておいて欲しいのはクオリティが下がってしまうのはあなたのセンスのレベルが低いからです。
クオ

もっとみる
実は難しい?Webサイトの正しいキャプチャ方法

実は難しい?Webサイトの正しいキャプチャ方法

ギャラリーサイトからWebサイトを正しくキャプチャしていますか?MacのディスプレイやFIgma、ブラウザの仕様をきちんと理解していないと、実は正しくキャプチャすることはできません。

この記事では、正しいキャプチャの仕方をPCとSPに分けて説明していきます。MacのGoogle Chromeを利用して、Figmaにアップロードすることを前提にして話します。

PCのキャプチャ方法1. 動きがある

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

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

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

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

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

もっとみる
【IDEA】医療系に合うフォント①〜Frutiger〜

【IDEA】医療系に合うフォント①〜Frutiger〜

みなさま、こんにちは^ ^
今回は、「医療系に合うフォント」として
“Frutiger”についてご紹介します。

Frutigerは欧文では、非常に判読性の高い(読みやすい)フォントとして
世界中で使われている馴染みのあるものです。

パリのシャルル・ド・ゴール空港のサイン用書体として開発されており、
日本では東京メトロの駅構内サイトして使用されています。

世界中の企業ロゴにも使用され、
有名な

もっとみる
【Webデザイン】未経験のデザイナー志望がやって良かったインプット習慣

【Webデザイン】未経験のデザイナー志望がやって良かったインプット習慣

こんにちは、デジLIG生活が8月をもって終わりを迎え、いち学生としての肩書きを失ってしまったゆかです。
口癖は「はやくデザイナーとして働きたい…」です。ポートフォリオがんばってます。

前回、卒業制作の記録noteを書いたところ、想像の何百倍もの反響をいただけて驚いていると共に、たくさんの応援やお褒めの言葉をいただきとても励みになりました。見てくださった全ての方々、本当にありがとうございました🙇

もっとみる
制作ノート: Yoshiki Okamura Portfolio

制作ノート: Yoshiki Okamura Portfolio

山田啓太です。今年の9月から本格的にフリーランスとしてWebサイトを制作していくにあたって、僕がどのように制作を進めているかをお伝えしたいと思い、制作ノートを書くことにしました。まずは2021年に公開した画家の岡村芳樹さんのポートフォリオサイトについて。公開順で言えば100 DAYS POETRYが最初なのですが、初めて僕がデザイナー兼デベロッパーとしてWebサイト制作を受注したのが芳樹さんのサイ

もっとみる
購買意欲をかきたてるECサイト8選

購買意欲をかきたてるECサイト8選

MEFILASメンバーがキュレーターとなって体験性の高いWebサイトを紹介するシリーズ「MEFIMEMO」。今回は「購買意欲をかきたてるECサイト」をテーマに紹介していきます!

スマートフォンの普及に伴い、ECサイトの市場規模は急速に拡大しています。「巣ごもり消費」への関心が高まる一方で、新規参入する企業も増加傾向にあるため、他社との差別化を図るためにも「独自性の高さ」が鍵となってくるのかもしれ

もっとみる
2019年が終わるまでにデザイナーが絶対に読むべきnote50選

2019年が終わるまでにデザイナーが絶対に読むべきnote50選

こちらの記事を拝見させて頂き、これのデザイナー版を読みたいなと思ったので、自分でまとめました。

ただ調べていくうちに今まで読んだことのなかった神noteがどんどん出てきたので、結果的に2019年という枠を飛び越え、50選までいってしまいました。

偉大な先人たちの英知が全てのデザイナーに届くことで、世の中がデザインによってより良くなっていったらいいなと思います。

また最後の組織デザインについて

もっとみる
デザイナーに求められているコミュニケーション力

デザイナーに求められているコミュニケーション力

スマートキャンプデザインブログ、モリシゲです。

私は普段からさまざまなデザイナーのブログを読んでいますが、「デザインはコミュニケーションだ」「基礎能力の中でも最も大事なのはコミュニケーション能力だ」という内容がたびたびテーマとして取り上げられています。

今回はそれらのデザインブログで言及されている「コミュニケーションのあれこれ」をかいつまんで、私のデザイン経験としても共感できる部分を中心にまと

もっとみる
日本デザインセンター オンスクリーン製作室、ポートフォリオ制作の裏側

日本デザインセンター オンスクリーン製作室、ポートフォリオ制作の裏側

自身が所属している日本デザインセンター オンスクリーン製作室のポートフォリオをリニューアルした。前回は自分たちで、nuxt.jsを使って手作りしたが、今回は外部のエンジニアに協力してもらって中身をしっかり入れようという方針を立てた。
https://ndcosd.jp/

見どころや制作をするにあたって考えたことをいくつか書いてみる。

デザインについて

現在の潮流から外れたデザインだと思う。

もっとみる