マガジンのカバー画像

デザイン

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

#Webデザイン

Webデザインカンプを1から作るための説明書

Webデザインカンプを1から作るための説明書

こんにちは、こばやす(@kobayas_s)です。
Webサイト制作の勉強しているけどコーディングばかりしていて、そう言えばWebサイトのカンプ(モックアップの事。1枚の画像でWebサイトのデザインを表現。のちにコーディングの材料となる)の作り方ちゃんと知らないや、とかありませんか?
twitterで調査してみたところかなり方がそう思っているようです。

そんな方のために、見本入りで出来るだけ詳し

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

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

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

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

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

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

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

0. 情報設計とトン

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

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

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

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

もっとみる