失敗しにくいWebデザインの制作フロー

WEbデザイナーに限らずですが、Web業界は流行り廃りや進歩が早いのでスキルアップが重要ですよね。

割と私はコーディングが得意なので、それしかできないと誤解されがちですが、全然デザインもやってます。
※グラフィックデザインは苦手なので避けてますが…。

自分のデザインに自信がないって人は多いと思います。
昔私も「Web/アプリのデザインは何が正解なんだろう…」って悩んでいました。

ときにはディレクタに「これじゃない」とか、クライアントに「ださい」とか言われる事もありました。

そういった否定を避けて、プロジェクト関係者を納得させるデザインの仕方/プロジェクトの進め方を紹介します。

“失敗しにくいWebデザインの制作フロー” の続きを読む

ユーザーの思考を見落としたデザインから見えてきたもの

ふとECサイトを見ていたら、ユーザーを誤解させるページを見つけました。

悪意があったり、ダサいからダメという類のデザインではなく、初心者が陥りやすい例かなと思いました。
また、小馴れたデザイナでも陥りやすい失敗だと思い、少し自分の中で考察してみました。

“ユーザーの思考を見落としたデザインから見えてきたもの” の続きを読む

Sketchでワイヤー/デザインテンプレートを作る時に便利なUIキット

SketchはUIデザインのツールですが、ワイヤーやモックを作ときも便利です。
簡単すぎて打ち合わせの中で画面を作りながら話をすることもあります。

やはりクライアントさんと話を進めるときは対面しながら同じものを見てやれると話が進めやすいです。

本記事では、ワイヤーを作るときに私が使っているテンプレートを幾つか紹介します。

UI系の素材

Atomic Design Template Sketch Resource

Atomic Designのワイヤーフレームテンプレートです。

データをダウンロードする

Wireframe Kit for Atomic Design Sketch Resource

こちらもatomic designを意識したものですがUIパーツが豊富です。
こういうのを一つ持っておくと、便利です。

データをダウンロードする

Mobile UI Wireframe Kit Sketch Resource

アプリなどで、画面のフローを考えるときに便利です。
最近プロトタイプも流行っているので、デザイナ/プログラマとのコミュニケーション、意識合せをするのによく使います。

データをダウンロードする

有料で使いやすいもの

Sketchは色んな人がダウンロード出来るように無料でUIを公開しているのですが、有料のものもあります。

私も最初は無料のものばかり使っていたのですが、最近は有料のものを購入してそっちを使い続けてる事が多いです。

購入する場所

幾つかUIテンプレートを購入できるサイトはあるのですが、私はui8さんが気に入ってここで探して購入しています。

https://ui8.net/

気に入ってる点は、価格が安い(5000円くらいで大体買える)ところと、人気のもの、新しいもの、セール中のものが簡単に探せるからです。

またカテゴリもUI Kitやワイヤーフレームなどに分けられていて必要なものが探しやすいからです。

singleton-2

LPなどに使えるテンプレートです。
ブログやEC系などジャンル別によく使うデザインが含まれているので、組み合わせでデザインに反映できます。

価格 $48
https://ui8.net/products/singleton-2

Frames Wireframe Kit

主にPC版になりますが、これ一つでクライアントとの打ち合わせがスムーズにいけます。
色んなレイアウトのデザインがあるのでこれに構成していくだけで、いい感じのページを作っていけます。

あと、有料の素材系の中ではめずらしく、$12と格安です。

価格:$12
https://ui8.net/products/frames-wireframe-kit

その他

Sketch Hunt Arrows and Lines Pack Sketch Resource

データをダウンロードする

Phoenix Startup UI Kit Pro

こちらも、組み合わせでサイトが作れちゃう系ですが、これの凄いところはこのデザインのHTML/CSS/JSのテンプレートが含まれているところです。

Sketchで確認をとれたらすぐにコーディングの方でその組み合わせを反映してすぐに公開まで辿りつけます。

価格:$88
https://ui8.net/products/phoenix-startup-ui-kit-pro

最後に

Sketchは軽くて、使いやすいので様々な場面で活躍します。

デザインのテンプレートも豊富にあるので、デザイナがいないときでも組み合わせで素敵なデザインが出来上がります。

短縮できた時間はコンテンツやマーケティングを考えるのに使えるとよいですね(ゝω・)

【サンプル有】日本語の明朝体で使えるWebフォント Noto Serifの使い方

4/10はなんの日かご存知ですか?
そう、フォントの日です。

本記事では2017年4月に公開となった明朝体で使えるWebフォント Noto Serifの使い方を紹介します。

とりあえず見たい方はデモを用意しているのでそちらをご覧ください。

Noto Serif CJKのデモ

“【サンプル有】日本語の明朝体で使えるWebフォント Noto Serifの使い方” の続きを読む

これからWebデザイナーを始める人にオススメ。脱Adobeという選択

この記事はSketch Advent Calendar 2016の15日目の記事になります。

皆さんAdobe製品は使ってますか?
私は使っていません(CCの契約はしているけど)。

理由は単純でAdobe以外のツールを使ったほうが私は効率が良かったからです。

私はSketchに出会う事でAdobe税から開放されました。
“これからWebデザイナーを始める人にオススメ。脱Adobeという選択” の続きを読む

現役WebデザイナーがデザインツールをSketch一択にした理由

転職を期に制作環境がmacに変わったのもあって二ヶ月前からsketchを導入しました。

ちょっと感動とか恋に落ちるとかのレベルを超えて衝撃的を受けています。sketchまじヤバイ。
“現役WebデザイナーがデザインツールをSketch一択にした理由” の続きを読む

現役Webデザイナーがランディングページのセミナーで学んだこと

2016/11/05に行われた 「フォルトゥナ ランディングページセミナー」に参加してきました。

デザイン関連の勉強会というのも珍しいですし、しかもランディングページといったあまり表に出てくる事のない勉強会なのもあって新鮮な話・心揺れる話が盛りだくさんで非常に満足の行くセミナーでした。

ちなみにランディングページのセミナーとあって別途ランディングページも作られていました。
セミナーLPを見る
“現役Webデザイナーがランディングページのセミナーで学んだこと” の続きを読む

色選び苦手な人に勧めたい、マテリアルデザインのカラーパレットの活用方法(初心者向け)

Google のマテリアルデザイン良いですよね。
特にカラーパレットがいいなと思っています。

サイトを作る際に「何色を使おう」、として色を決めても「じゃあこの色の濃いバージョン、薄いバージョン」などより複数の色が必要になってきてある程度組み合わせの検証の時間が必要になってしまうのはみなさん見に覚えがあるのでは無いでしょうか。
Googleが提供しているマテリアルデザイン では予めカラーパレットが作られており、それを使えば色の組み合わせをより短時間で構成することができます

色選びが苦手な人や面倒な人にはオススメです。
“色選び苦手な人に勧めたい、マテリアルデザインのカラーパレットの活用方法(初心者向け)” の続きを読む