• トーン＆マナーが何か説明できる
• 参考サイトを見つけて分析できる

アン

ワイヤーフレームからどうやってデザインにしていけばいいですか？

Yukino

デザインには一定のルールが必要。それがトーン＆マナーです

トーン＆マナーとは「〇〇らしさ」

Yukino

LINEってどんなデザインですか？

アン

緑で大文字ではっきりした感じで・・

Yukino そうですね！そのイメージってLINEらしさだと思いませんか？

トーン＆マナーの目標は、そのブランド「らしさ」を伝えることです。 つまりこれはブランディングなのです。 ウェブデザインも、そのブランドのイメージを「造る」あるいは「守る」必要があります。 そのために、緑で大文字ではっきりした感じ、というルールを使っているというわけです。 これを広告業界でトーン＆マナーと言います。  

Yukino

この部分に関われるって、素敵な仕事だと思いませんか？

トーン＆マナーではターゲットと市場を常に想像しよう

逆に、 緑で大文字ではっきりした感じ と聞いてLINEが思い浮かびますか？ 大半の日本人はそうでしょう。 ということは、LINEは日本でのブランディングが成功していると言えるでしょう。 しかし、これが韓国だとします。 もしかしたら 緑で大文字ではっきりした感じは、 検索エンジンのNAVERだと思われるかもしれません。  

• 作ろうとしているトーン＆マナーがお客様に浸透しやすいか？
• 業界と自社の立ち位置から、どんなイメージをトーン＆マナーとしたらいいか？

常にターゲットであるお客様と業界を見るクセをつけましょう。  

トーン＆マナーがずれているとき

ブランドの「らしさ」がないほかに、「当たり前」と違っているときもトンマナがずれていると感じます。 例えば、こちらはリラクゼーションスパのウェブデザインです。     色、フォントを変えてみます。     リラクゼーションなのに

• オレンジと青
• 太いゴシックフォント

これは多くの人がイメージする当たり前とずれています。 また、ページ内の1セクションでも違うトンマナを使ったデザインが紛れても違和感があります。 デザイン全体を通してこういった「ずれ」がないか考えるようにしましょう。  

トーンマナーの決め方

それでは実際にトンマナを決めていきましょう。 実際の現場では、クライアントを見極めて以下の方針で進めるのがおすすめです。

• こだわりのあるクライアント→一緒に考える
• デザインやブランディング 、マーケティングに弱そう→デザイナーが積極的に提案

1. 参考サイト・見本を決める

まずはお手本となる参考サイトを決めましょう。 参考サイトはとても重要です。 始めのうちは、完コピくらいの勢いでもいいでしょう。 デザインは何十年とやっているベテランでもわからないと言います。 ウェブデザインはアートではなくビジネスツールを作るものなので、そういった観点からも参考サイトを決めておくことは重要です。

参考サイトを探す

ヒアリングシートでクライアントが参考サイトを提示しているので、それに似た別サイトを2−3つピックアップします。 以下のようなサイトで探しましょう

• LP Advance
• SANKOU!
• MUUUU
• Web Design Clip
• Pinterestで「Webデザイン」「Web design」等で検索してみてください！

分析する

ピックアップしたら、クライアントが提示したものと

• 似ているところ
• 違うところ

を考えておきます。 その分析をもとに、ウェブサイトに活かすところ、オリジナリティを出すところなどを決めていきましょう。

2. パーツごとにルールを決める

参考サイトから特徴を読み取ったら、具体的にルールを決めていく段階です。

色

色の組み合わせは「hexカラーコード」をメモしましょう。 hexコードは＃で始まる6桁の英数字で表される色を特定するコードです。 コーディングで必要になるのですが、この段階では、ひとまずコードをメモる、ということだけやっておいてください。 Coolorsというサイトを使って組み合わせを考えたり、アカウントを作って保存しておくと便利です。 https://coolors.co/ ↓スペースキーを押すたびに色の組み合わせが変わります。      

フォント

フォントが与える印象は大きいのです。 絶対決めておくべきなのは ゴシック体系か明朝体系かということです。

• ゴシック体のイメージ：ポップ、活発、元気、しっかり・・・
• 明朝体系のイメージ：洗練された、都会的、高級感・・・

タイトルや見出しなど、本文以外のフォントはブランディング重視で決めておきます。 細かい文字になる本文は、読みやすいかを重視するのが良いです。   フォントが見られるサイト

• Google Fonts
• Adobe Fonts
• Font In Use
• ためしがき

イラスト・写真

使用するイラストや写真もイメージを左右します。

例えば、男の子のイラスト。印象が全く変わりますよね？

以下のサイトなどを使って、使いたいアイコンや写真のイメージを決めておきましょう。

• Photo AC
• FreePik
• Vecteezy
• Pexels
• Unsplash

商用利用ができるか確認しよう

フォント、イラスト、写真は、無料の物も多く出ていますが、以下のことを確認してから使うようにしましょう！

• 商用利用ができるか
• 引用元を明記する必要があるか

上記に反して素材を使った場合、ペナルティが課されることもあるので注意が必要です。

クライアントも巻き込んでいこう

Webデザインは制作サイドだけでなく、クライアントも一緒に考えるのが重要です。 デザインが決まるまではしっかりと話し合いをして、イメージを固めていきましょう。 これができないと、「やっぱりちがったから直して」になってしまいます。 こまめなコミュニケーションを心がけましょう！

もっとWebデザインを学びたい方はこちら

ロードマップ目次↓

次回のレッスン↓

The post Webデザインのトーン＆マナーとブランディング first appeared on Linksbase.

• ワイヤーフレームとは何か説明できる
• XDでワイヤーフレームを作れる
• XDのショートカットを覚える

ワイヤーフレームってなんだ？

ワイヤーフレームはウェブデザインの骨格のことです。 ヒアリングシートをもとに「どこに」「なにを」配置するかを決めていきます。

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

アン

このテンプレがあれば問い合わせがきたらすぐ対応できそう！

ウェブデザインのスクールに行っても、ワイヤーフレームについては教えてくれませんでした。
多分、多くのスクールがデザインツールの使い方とコードの書き方のみです。
しかしながら、ヒアリングで聞いたことをデザインにいきなり起こそうと思ってもなかなかうまく進まないものです。
大まかな設計図としてワイヤーフレームを書くことで、頭が整理されていくはずです。

なぜワイヤーフレームを書くのか？

コンテンツの過不足を確認するため

ヒアリングで聞いた情報には、重複しているものがあるかもしれません。
配置してみると、実はコンテンツが少ないページがあったりして、コンテンツを増やしたり、別のページと合わせたりする必要が出てきたりします。

導線を決めるため

ユーザーが回遊しやすいようなサイトにするために、ボタンの位置、数、全ページへのリンクがあるのかなど決めていきます。
構造の設計になるので、ここがしっかり組めていないと後々大きく変更することになりかねないので、しっかりすり合わせましょう。

フォントのルールを決めるため

意外にも、フォントが与える印象は大きく、ブランドイメージにも関わってきます。
ワイヤーフレームの段階で見出し、本文のフォントの種類と太さを決めておくとイメージがしやすいでしょう。
ワイヤーフレームの書き方には正解はなく、案件によっても様々です。
ブランドカラーを決めてワイヤーの段階から色を決める場合もあると思います。
色々な記事を見ながら、自分にあった形にしていきましょう！

XDワイヤーフレームの作り方

用意するもの

• XDをダウンロードしていない方はこちらから。
• ヒアリングシートはこちら

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

こちらの３つのルールを守ってワイヤーフレームを書くのがおすすめです。

白・黒・グレーのみを使う

あくまでも設計に集中したいので、色を入れるとフォーカスしづらくなります。

フォントの大きさを決める

最近は、ゴシック系のフォントで大きく表示させるデザインが流行っていますね。ヒアリングで聞いたイメージや参考サイトをもとに、フォントの大きさを決めておきましょう。

フォントを決める

フォントの種類は本当にたくさんあって、悩んでしまいますが、全体のイメージを左右するのでこの段階で決めておきましょう。

画面サイズを整えよう

まずは画面サイズを整えていきましょう。
おすすめは、横幅1366pxで、そのうち1080pxをコンテンツを表示する幅とするサイズです。
XDを開いたら、webのところから1366pxを選びます。

アートボードが開くので、左端をドラッグしてガイド線を引きます。
1080pxのコンテンツ幅にしたいので、両端から143pxのところに引くとぴったりです。

アン

このテンプレがあれば問い合わせがきたらすぐ対応できそう！

カラーパレットを作ろう

次に、カラーパレットを作ります。
XDに指定した色を覚えさせておけば後で繰り返し使えたり、一括で色が変えられるようになるので最初に作っておきます。
四角形のツール（ショートカット：R）を持って、適当な四角を書きます。
右側のプロパティから、塗りの色を変更します。

Command + Shift + Y　を押して、アセットを開きます。
一番上の色の横にある＋マークを押すと、選択しているオブジェクトの塗りの色が記憶されます。

これを３つ作って、
黒：文字色　白：背景が黒の場合の色　グレー：写真用
を覚えさせておきましょう。
次回から図形やテキストの色を付けたい時、これらをクリックするだけでその色を使えます。
そして、このパレットの色を変えると、パレットを使用して色付けした全ての図形に反映されます。
やっぱり#DDDDDDのグレーじゃなくて#A2A2A2のグレーにしようと思った時、全ての図形をひとつひとつ修正しなくて良いという分けです。
 

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

→XD ショートカットリストはこちら

フォントを決めよう

色の次はフォントです。
コーディングでも使うのですが、現時点ではとりあえず、
大きい見出しから順に、h1、h2、h3
本文は、pで囲むと覚えてください。
テキストツール（ショートカット：T）を持って適当なところをクリックして文字を入力します。
プロパティから文字の大きさ、太さ、フォントを選びます。
色は先ほど登録した黒にしたいので、アセットの黒をクリックして色を適用します。
このフォントスタイルを覚えさせたいので、これもアセットから登録します。
同じように、h2、h3、pを以下のように設定して、アセットに登録してみましょう。

• h1：50px　黒　好きなフォント
• H2：36px　黒　好きなフォント
• H3：20px　黒　好きなフォント
• P：16px　黒　好きなフォント

コンポーネントを使おう

XDでは、コンポーネントを使うとさらに効率よくワイヤーフレームを作ることができます。
コンポーネントは、何度も使うパーツを覚えていてくれて、使いたい時にすぐに使えるライブラリみたいなものです。

アン

このテンプレがあれば問い合わせがきたらすぐ対応できそう！

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

 
四角形とテキスト、線（ショートカット：L）を使って、このようなボタンと写真のパーツを作ってみましょう。

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

パーツができたら、パーツを構成している全ての要素を選択します。
該当の範囲をドラッグで囲うか、Shiftを押しながら全ての要素をクリックしていきます。
アセットパネルのコンポーネントの横の＋をクリックすると、そのパーツが記憶されます。
先ほど作った見出しも、同じようにコンポーネントとして登録すると便利です。

パーツを組み合わせてワイヤーフレームを作ろう

登録した色、フォント、パーツを組み合わせながら、ヒアリングシートをもとにワイヤーフレームを描いてみましょう！
コンポーネントを使う時は、使いたいコンポーネントをアートボードにドラッグするだけでOKです。
コンポーネントは、最初に登録したものが”マスターコンポーネント”とされます。
このマスターコンポーネントの「色」「フォント」「大きさ」などを変更すると、そのコンポーネント全てがマスターコンポーネントと同じように変化します。

便利なテンプレートを組み合わせる

上記のようなコンポーネントが作られたXDのテンプレートファイルが、無料/有料でたくさん出回っています。
→XD日本語テンプレート
これを利用するのも良いですね！

もっとWebデザインを学びたい方はこちら

ロードマップ目次↓

次回のレッスン↓

前回のレッスン↓

The post 完全初心者OK！XDを使ったワイヤーフレームの書き方 first appeared on Linksbase.

アン

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

【無料配布】ヒアリングシートテンプレ

Yukinoです。 勿体ぶらずにまずはこちら。 ヒアリングシートテンプレ Googleのスプレッドシートになってるので、ファイルをコピーしてお使いください。 シート1〜4に分かれていることを確認してくださいね。

なぜヒアリングシートが必要なのか？

ヒアリングシートとは、クライアントの要望や現状の問題点、サイトの目的などを洗い出すための質問リストです。 このヒアリングシートを元に、戦略的にウェブサイトを作っていきます。

思い込みやイメージは人によって全然ちがう！

クライアントと制作サイドが同じ方向に向かって行けるようにするのがヒアリングシートの役割です。 例えば、ターゲットが30代女性だとしても、クライアントが思っているターゲット層とデザイナーが思う30代女性のイメージは違っています。 より詳しくクライアントのビジネスを知る、イメージを具現化する為に、ヒアリングシートを活用してください。

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

シート1 目的を明確にする

テンプレのシート1では、 * 目的を決め * デザインイメージの好き嫌い * コンテンツの書き出し を行います。 リニューアルなのか？LPなのか？

• なにを売りたいのか？
• なにを伝えたいのか？

プロジェクトのコアとなる目的を決めましょう。 その目的に沿って、どんなイメージで、どんな色使いで、どんなコンテンツが必要なのか書き出していきます。

シート2 ターゲットを明確にする

シート2はペルソナシートです。 ペルソナをしっかりイメージすることで、制作側　サイドとクライアントサイドのイメージのすり合わせがより明確になります。 ペルソナについてはこちら。 https://linksbase.net/marketing/what-is-persona/

シート3 強み・アピールポイントを明確にする

シート3はうちのすごいとこシートです。 ペルソナでイメージした人物に対して、営業をかけるイメージで、「うちのここがすごい！」とアピールしてみます。 ウェブサイトが優秀なセールスマンになれるように、セールストークを作っているイメージです。

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

すごいとこシートから見出しがつくれる

シートにも記載していますが、30文字が入る列幅になっていて、狙うキーワードをできるだけ入れてもらうようになっています。 これには2つ理由があります。

1. 見出しをつくる
2. SEOに強くする

まず、「キャッチフレーズ」がh1として使えます。 そして、「提供しているサービス・商品が良い理由」がh2として使えます。 サイトのテキストを考えるのはクライアントサイドのことが多いと思いますが、要点がまとまらないことが多いです。 情熱をもってビジネスしているが故、「これも伝えたい」「これも載せたい」というふうになりがちです。 適切な見出しをつけないと、伝えたいことがまとまりまらないので、短文で的確な要素を盛り込むためにこのうちのすごいとこシートが役立ちます！ サイトに訪れるお客様にとって有益な情報が適切に掲載されていないと、いくらデザインがかっこよくても意味がないのです。 そして、「短文で適切な見出し」が書けると、SEOにも貢献できます。 検索エンジンが検索されたキーワード(=ユーザーが困っていること)に適切に答えているサイトを上位表示するからです。

シート4 必要な情報が集まるポイントにする

シート4は基礎情報です。 プロジェクトに関する基本的な情報などを記入していきます。 写真やロゴデータのやりとりなどはGoogleドライブを使うなどするとスムーズです。

クライアントと確認しよう

ヒアリングシートの記入をしてもらったら、ミーティングをして掘り下げていきます。
遠隔であっても、ビデオ会議などを利用して一度話す機会を持ちましょう。
あとから振り出しに戻らなくて済むように、ここでしっかりと基礎固めをするのが目的です。
 

アン

このテンプレがあれば問い合わせがきたらすぐ対応できそう！

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

もっとWebデザインを学びたい方はこちら

ロードマップ目次↓

次回のレッスン↓

The post ウェブデザインになぜヒアリングシートが必要？テンプレ無料配布します！ first appeared on Linksbase.

私は、デザインもパソコンも、得意だったわけでもありません。

海外が好きなので、どこでも稼ぐことができたらいいなと思ってウェブデザインの勉強をして今に至ります。

ウェブデザイナーを目指したのは、前職で「残業で稼いでいる」ことに気がついたからです。
新卒のトレーナーや、チームのリーダーも任せてもらったのに、それが給料に反映されず、だらだら残っていることで稼いでいる自分が嫌でした。

そこからスクールに通い、仕事を辞め、フリーランスとして活動しています。

フリーランスウェブデザイナーのいいところ

会社員から比べて、フリーランスのいいところはこんな感じ。

• どこでも働ける
•  いつでも働ける
• 自分で報酬を決められる
• 頑張った分だけ報酬がある
• 常に新しいことに挑戦できる

目標決め: あなたにとってのゼロイチはどこ？

フリーランスウェブデザイナーになる！

と決めたら、「ゼロイチポイント」を決めましょう。

ゼロイチは、ゼロから初めて、一人前になるポイントのことです。
どうなったら自分はフリーランスウェブデザイナーだと言えるか？という目標ポイントですね。

フリーランスウェブデザイナーと言っても、色々な働き方があります。

• 完全フリーランスで生計を立てる
• 副業として
• 子育ての傍ら

働き方が様々ならば、どんな姿を目指すのか、ゼロイチポイントを高く設定するのかどうかも人それぞれです。

1件30万、時給換算5,000円

私のゼロイチは、はじめは、ウェブデザインでお金をいただくことでした。

ただ、いざやってみると、その金額が重要だと感じました。
それで目指したのが1件30万の案件を取ることです。
だいたいこれで時給5,000円くらいになる計算でした。

世の中のブログで見るような素早い成長はしてませんが、独立半年で30万の案件を取れた時は、本当に嬉しかったです。

そしてそのクライアントさんも喜んでくださり、紹介案件にもつながりました。
この件をきっかけに、「フリーランスウェブデザイナーです」と言えるようになったなと思います。

イチからはじめられる教材をめざしています

このブログシリーズが目指していることです。
一通りやれば、フリーで活躍できるようになります！

1. ディレクションができるようになる
2. デザインとコーディングができるようになる
3. 案件獲得と満足のレビューをもらう
4. 新しい情報に敏感になる

私自身まだ経験は浅いですが、ちゃんと独り立ちできました！
だからこそ私がやってきたことを忘れないうちにシェアしたいなと思っています。
未経験から独り立ちするまでの手順書のひとつとして、初心者がググっていることの答えになりますように！

フリーランスウェブデザイナーへのロードマップ

プランニングしよう

ヒアリングシートを作成しよう

Adobe XD・イラレを使えるようになろう

XDでワイヤーフレームを書いてみよう

トーンマナーを決めよう

魅力的な写真素材を手に入れよう

アイコンを手に入れよう

ワイヤーフレームをデザインに起こそ

デザインを勉強しよう

守破離のプロセス

HTML CSSがわかるようになろう

スクールに通う

独学する

Yukinoのウェブ制作講座

個人事業主になろう

屋号を決めよう

開業届を出そう

会計ツールを使おう

源泉徴収を理解しよう

ポートフォリオをつくろう

自分のサイトをつくる

案件をもらう前に準備しよう

案件獲得の方法

契約書を交わす

案件をとろう

ココナラで破格リスティング

SNSで宣伝しよう

生の声で口コミをもらおう

アンケートを取ろう

Twitterで最新情報をGETしよう

フリーランスがつぶやくべきこと

フォローすべき先輩たちのアカウント

怪しい勧誘に注意

継続案件をもらえるようになろう

メルマガを始めよう

ブログで発信しよう

The post フリーランスウェブデザイナーになるためのロードマップ first appeared on Linksbase.