# デザインから考えるWordPress Vol.9　原稿

デザインから考えるWordPress Vol.9 はじまりました。こんばんは！

---

今日は前回から引き続いて
「FigmaでWordPressのブロックのデザインをして実装までやってみよう その7」として、
「Figmaでワイヤーとロゴを作ってみよう」をやります。よろしくお願いします

---

こんばんは、みみです。この会の主催の一人です。
ウェブデザイナー、ウェブ開発者として20年近くお仕事をしています。
東京から繋いでおります。よろしくお願いします。

いつもはもうひとり、男木島の額賀さんとご一緒に、ここでご挨拶をするのですが
今日は急遽、残念ながらやむを得ない事情により額賀さんがおやすみなのです。
全国の順子さんファンのみなさんごめんなさい。

ぶっちゃけとてもさみしいし、いつも以上にテンパりそうですが
どうか暖かい目で最後まで見守っていただけると嬉しいです。

そんな私を助けてくれる心強い仲間をご紹介します。ともさんです。

（ともさん挨拶）

ぱちぱちーありがとうございます。
そんな訳でですね、ご視聴のみなさん、いつも以上のコメントと、
出来たらハッシュタグ #WordPressAndDesignでガツガツ発信をしていただけると大変助かります。
よろしくお願いいたします。

---

さてはじめに、お決まりのお話をします。

（スライド読む）

---

もう一枚あります。お決まりなのでご容赦ください。

（スライド読む）

---

お待たせしました、本題です。

（スライド読む）

とconnpmassにてお知らせしたのですが、そもそもちょっと欲張り過ぎたなーというのと、
順子さんがいらっしゃらないのもあって、少し的を絞らせて貰おうと思っています。

---

## 1. 前回までの整理：ターゲット、キーワード、ワイヤーデザインの共有

前回わいわい話ながらメモしていった状態がこちらです。ヒアリングの仕方とか色々と、百戦錬磨な順子さんがディレクションの肝を話してくれているので気になる方は前回のYoutubeをご覧ください。

---

ということでヒアリングの内容をざっくりまとめた内容がこちらです。

大体ヒアリングできたかな、と思うのですが、主なターゲットとキーワードの話はすっ飛ばした気がするのでその話をしないとなのですが、時間の都合上、「ターゲットは「WordPressのサイト制作に関わる人」 --- 性別も年代も固定されない」「キーワードはWordPress、Figma、ウェブデザイン、デザインシステム、サイト制作、ワークフロー」と一旦こちらで決めさせてもらいたいと思います。提案があればぜひコメントなどください！

---
（スライド戻る）

そして、サイトマップまでは良いかな、と思うのですがワイヤーが手書きのメモ書きぐらいの状態で、流石に精査が足りないので、もうちょっと詰めないといけないです。

---

が、こちらも時間の都合上、トップページのワイヤーについてもう少し調整したものを三分クッキング的に用意しました。

---
(Figma本体に切り替え)

実際のFigmaのファイルを見てもらったほうが良いかもなので、リンクをシェアしますね。

こんな風に、私としては最近、ワイヤーデザインからモバイルサイズで起こすのが良いと思っています。

文言などの内容はまだ確定していませんが、各要素の命名というか定義までは済んでいる状態です。

デザイン担当の方に考慮してもらいたい点はコメントで追記してみています。

ワイヤーデザインって色々な状態やタイプがあると思うのですが、私にとってワイヤーデザインとは、最低限「要素」が確定しているもの、です。

文言なんて後からいくらでも変更がかかるものですし動的なものもあります。特にブロックエディタで作成する場合は流動的なものとして捉えるのが良いと思います。

なので、ヒーローエリアがあるのか無いのか、テキストが入るのか入らないのか、CTAがあるのか無いのか、そういうものが最低限判断できる資料であると思っています。

ブロックエディタでワイヤーもざっくり作っちゃう、という作り方もまあ有りかな、と思うのですが、一旦、WordPressの仕様と切り離して、規模に関わらず、クライアントに見せるというより自分の中の情報整理でやっておくのは結構オススメです。

みなさんがどうやってこの辺を整理しているのかぜひ聞きたいです。良かったらコメントくださいね。後ほどワークショップのところでワイワイ出来たらと思います。

---
（ここまでで10分）

## 2. ロゴデザインを作ってみよう（15分ぐらい)

さて、というわけで、今日の的は主にロゴデザインの方に絞ってみたいと思います。

順子さんたちと事前にロゴデザインってどうやって作ってる？みたいな相談をしていたのですが、そもそもロゴってなんだろうね？みたいな話をしていまして、その内容を全部お伝え出来る自信があまり無いのですが、要点を絞って話してみます。

まず、本日の参加者の皆さん、Youtubeをご視聴の方も含めて、今までロゴを仕事じゃなくてもいいので作ったことがあるよ！という方いらっしゃいますか？

（レス）

かくいう私は、仕事で、ちゃんと作って納品したロゴというのは、たぶん、少なくとも10個以上は作ったことがあると思います。ちゃんと数えていませんけれど…昔はIllustratorで、今はFigmaとIllustratorで作っています。ウェブデザインのついで、で頼まれることが多いのでそんなものです。最近はロゴ単体で頼まれることもあります。

そもそも最近はウェブサイト制作自体を年に数本ぐらいしか受けないので、そんなものです。大きめの案件だと、ロゴデザインは既にあることが多くてデータを貰ってそれを反映する、という作業が多いですね。

つまり、ロゴデザイナーではなくて、あくまでウェブデザイナーとしてロゴデザインんついて喋ります、ということでご了承ください。

### 2.1. ロゴとは

まず、ロゴとは、とぐぐると、こういう意味が出てきます。

>「ロゴタイプ」の略。会社名・商品名などの文字を特別にデザインしたもの。意匠文字。
> - Oxford Languages

これには誰も異論が無いのではないかな、と思います。会社に限らず個人でもあらゆる名前があるものに作ることができるものですね。

### 2.1. ロゴデザインの考え方・作り方

で、ロゴのデザインの考え方とか作り方についてはですね、

---
(logo stockのサイトに飛ぶ)

ここのサイトが分かりやすく、ロゴ作成の基礎知識を8ページに渡って解説してあって良かったので、ロゴを作ったことが無い方はご覧になられると良いと思います。
https://logostock.jp/about-logo/

ロゴは一般的に
ロゴタイプという文字を意匠化したもの、
シンボルマークという象徴した図形部分、
に分けて考えることができます。

どちらか一方、ということもありますが、両方あってかつ分離できるのが後々扱いやすく展開しやすくて良いかなというのが個人的な考えです。

という感じで、残りの部分で制作フローから運用までまとまっています。

全部一緒に読んでいると時間が無くなってしまうので、ロゴデザインの基礎知識は大体この辺だよーということで次に行きますね。

---

### 2.3. ウェブデザインにおけるロゴデザイン

という訳でちょっと基礎をすっ飛ばして、ウェブデザインに限定した場合のロゴデザインとロゴの扱いについて話をしたいと思います。

さっき、大きめの案件だったりリニューアルだったりすると、ロゴデザインが既にある場合が大抵だと言いましたが、それでも案外やることや考えることが多かったりするのがウェブデザインにおけるロゴデザインです。

良くあるのが、古いロゴだったり使用用途がしっかり想定されていないものだと特に、faviconについて考慮されていない場合が多い、ということです。

faviconってこれですね、タブの横に表示されたり、Googleの検索結果に表示される16ピクセル四方のサイズのアイコンです。

意匠がそのままで、このサイズに耐えられるロゴというのは中々存在しないと思います。

結構大きい案件でもこの辺を考えてくれていない場合が未だに普通にあって、favicon用にロゴをリデザインする、という作業が発生することもあります。

そういうことなどから自然に、なのかわかりませんが最近、といっても2014年ぐらいからですが、レスポンシブロゴという考え方が出てきています。

まずは、百聞は一見にしかず、なサイトがあるので見てみましょう。

---
(http://responsivelogos.co.uk/)

Responsive Logos
http://responsivelogos.co.uk/

分かりやすいように、レスポンシブモードにしますね。
画面の幅に応じて見慣れた有名なブランドのロゴが変わっていくのがわかります。

---

レスポンシブロゴについてもっと詳しくはこの辺の記事を参照されると良いかもです。

レスポンシブロゴ作成のための究極ガイド
https://www.radflaggallery-design.com/blog/responsive-logos-guide

ロゴもレスポンシブロゴの時代へ デザイン会社 ビートラックス: ブログ
https://blog.btrax.com/jp/responsive-logos/

リンクを共有しますね。

そんな訳で、コカ・コーラレベルのロゴを扱うことはそう無いと思うのでここまできっちり作られたレスポンシブロゴを手掛けることはあんまり無いかなと思うのですが、ウェブデザインを考える場合、少なくともfaviconの事を抑えてロゴを扱う必要があるかと思います。

次に何で作るか、という話をしましょう。

### 2.4. Figmaでロゴを作る

さっき私は最近、FigmaとIllustratorで作ります、と言いましたが、今は、ウェブサイトに限らず、デジタルプロダクトの場合のロゴはFigmaで作っても何の問題もないと思っています。

なぜFigmaで作るの？というのは、先日あったFigmaのコミュニティイベントで良いLTがあったのでその資料をご紹介しておきます。

Figmaを使ったロゴ作りのメリット（Tokyo Config Watch Party とっておきFigmaの活用策をシェアしよう！） - Qiita
https://qiita.com/xrxoxcxox/items/261b4b63bfd3fe688b17

ただし、FigmaはCMYKを扱えないので、メディアミックスが前提のプロダクトだったり、紙媒体が普通に必要そうな一般企業さんの場合は、CMYK値をきちんと出す必要があります。

それでも最近はFigmaでヒアリングしているので、そのままラフをFigmaである程度起こしたり、Figmaでご確認いただいてから、納品物だけIllustratorで起こして渡す、ということをやったりしています。この2年ぐらいで5点ぐらい、そんな感じでFigmaで作って納品していますね。

### 2.5. 成果物として何を共有するか・ガイドラインの必要性

5の成果物として何を共有するか、ガイドラインの必要性のところにかかってくるんですけれど、
Figmaのママでお渡しできるスタートアップ企業さんもあるし、Illustratorでお渡ししてもご自身ではIllustratorが扱えない企業さんもいらっしゃると思います。

そういった場合に、何を成果物としてお渡しするか、なのですが、とりあえず企業さんだった場合は複数人がロゴを扱う可能性が多いので、いわゆるアセットと呼ばれる、Illustratorデータだけじゃない、ロゴのいろんなパターンをPNGやSVG化したZIPファイルを作ってお渡しすることが多いです。要る・要らないとか聞かずに渡しちゃうこともあります。

なぜかというと、いわゆるガイドライン、（LINEのガイドラインを提示）こういったガイドラインを作るのも大事なのですが、これをぽんとお渡ししただけだと普通の企業さんだと活用していただけない場合が多いからです。なので、もう余白とかを含んだ状態のアセットを作って一緒にそっとお渡しすることが多いです。もちろんガイドラインもあるとベターですしなるべく作ります。

この辺りもぜひ、皆さんのHOWTOを共有してください。

さて、長い前説になりましたが、ロゴデザインのいろは、はとりあえず話せたということにして後半、というかメインのハンズオンに移りたいと思います！

---
(みんなで触るファイルへ)

ということで、ロゴデザインをやりたいという方はぜひこちらのファイルへ移動してみてください。

前回までで作ってきた、ムードボードと、デザインシステム、というかトンマナ、タイポグラフィと色について相談してきた内容をまとめた資料があります。

（コンセプト、これまでの相談内容を共有）

では、ぜひ皆さん好きな場所に陣取って、名前を書いたりして場所決めしてください。各々作業をしていただきたいと思います。

えー、ワイヤーを作ってみたかったのに、という方は、先程共有したトップのワイヤーを更に作り込んでいただくか、aboutページについてのワイヤーを作ってみたりしてみてもらったら良いかなと思っています。

というわけでYoutube配信はここまでです。Zoomに入ってきてくだされば続きも聞いていただけますので良かったらどうぞ。ココから5分間の休憩に入りますのでその間に移動して貰えたらと思います。

ではYoutubeをご覧の皆さん、また次回〜！次回は6月23日の予定ですー！
どんなロゴができるかおたのしみに！

（Youtube配信終わり）

---

（休憩5分）

---

## 3. ロゴデザインやってみよう（50分)

---

## 4. 次回の案内（5分）

ということで、次回のご案内です。
まだ内容は未定ですが、開催日だけは決まっていまして！
次回は6月23日、21時から開始します〜

そしてconnpassも、この後すぐに公開しますので
ぜひぜひ、登録などなどお願いします！