【11日目】html ul/ol要素の入れ子のお話

大発見しました。入れ子構造、今まで間違って理解していました・・・。

今日は、それのメモ。

正しくはこう書く!

<ul>
  <li>あいうえお
    <ul>
      <li>かきくけこ</li>
      <li>さしすせそ</li>
    </ul>
  </li>
</ul>

ポイントは「あいうえお」の閉じタグの位置。
これまで、あいうえお</li>と思ってた・・・。

確かに、そこで閉じたら入れ子じゃないな。
こんな事、基本中の基本中の基本。だろうけど、私、大発見でした。

ちなみに、もう一つ新しく知ったことが。

<ol start="2">
start="数字" でスタート開始番号を変更できる!

使う機会もなかったし、考えたこともなかった。経験あるのみだ。

【10日目】ページネーションのやり方

フォント選択の手順

系統(ゴシックか明朝か)を選ぶ→更にその系統から書体を選ぶ

→ウエイトを選ぶ→字間調整

 

ページネーションのお話。

 

①マージン

②タイトル

③本文

④見出し

⑤キャプション

⑥色

⑦その他のグラフィック要素

 

これらの項目は、同じルール要素が多いほどページ同士の結束が強い。

そして、変化を付けたい場合はこのルールを変えていく。その際、順番が大切。

若い番号のものほど変えないほうがよく、あとの項目に変化を付けることで違いを見せる。

 

今日はいつも以上なメモ具合ですが、終わりたいと思います。

 

【9日目】書体について2

昨日の復習からー。

書体は大きくわけて4パターン

日本語の明朝体とゴシック体

欧文のセリフ体とサンセリフ

 

明朝体、ゴシック体はウロコがあり横に対し縦線が太い。可読性が高いので長文に適している。

それに対し、セリフ体、サンセリフ体は縦横の線の太さは同じでウロコがない。

視認性に優れているため見出しやタイトルに適している。

また、プレゼン資料やポスターの場合は、明朝体、ゴシック体は読みにくいので、ゴシック体を用いる。

 

では今日の本題。

昨日の内容では、習得することが少なかったので書体について引き続き書体について。

今日は「書体の選び方」に焦点を当てていこうと思います。

 

まずは、フォントを選ぶ時の順番。

 

  1. フォントの系統を選択
  2. 選んだ系統から、書体を選択
  3. 書体のウエイトを決める
  4. 字間の調整

1.フォントの系統選択

明朝体かゴシック体か。(場合によっては、筆書体、手描き文字も)。表現したいイメージに近い系統を選ぶ。

 

▼各系統のイメージのまとめ

明朝体・・・拡張高い、高級感、エレガント、信頼感のある、落ち着いた、伝統、古風

ゴシック体・・・親しみやすい、カジュアル、シンプル、元気、冷たいさ

 

2.選んだ系統から書体を決める

同じゴシック体や明朝体出会っても雰囲気は違うので、イメージに近い系統を選ぶ。

一般的に、とがっている部分が多いと堅いイメージ、丸みが多いと柔らかいイメージ。

代表的なゴシック体を例にすると、

ヒラギノや小塚は堅いイメージで、新ゴやじゅんはやわらかいイメージになる。

 

3.書体のウエイト

太さのこと。細いほど女性的で太いほど男性的で力強いイメージとなる。

イメージに合わせて選ぶ。

 

4.字間の調整

字間は狭いほど元気なイメージ、広いとゆったりとおおらかなイメージに。

 

こんな流れで書体を選択していくのが重要なよう。

 

あと、こだわり過ぎてフォント多様に注意。2種類、多くても3種類に留めること!

 

おしまい。

 

参考サイト

http://butai-ura.com/2013/10/17/design-forum02/

http://www.ar-ch.org/mt/archives/2012/04/post-6.html

 

 

 

 

 

 

 

【8日目】書体について

復習から。

キャッチコピーは代表的なパターンが合って、それに当てはめて書くといいものが書ける。ということで、よく使いそうなものを覚えよう。

●質問形式

●これ、こので始める

●~の方法

これくらいしか思い出せません…。

 

では、今日の本題の書体について、いってみよう。

書体の解説サイトってめちゃくちゃ沢山あるけど、

その中でも、カンタンに解説しているところを見つけたので、そのサイトを参考に。

 

書体は大きくわけるとこんな感じ

日本語:明朝体・ゴシック体

欧文:セリフ体・サンセリフ

 

明朝体は、横線に対し縦線が太く、右側に三角の山のようなウロコがある。

カンタンに行っちゃうと、習字の毛筆で書くときの字みたいなの。止めるところは三角の山作るし、横より縦のほうが力入れて太く書くでしょ。

 

ゴシック体は、縦横の太さがほぼ一緒でウロコがない(ほとんど)書体。

欧文のセリフ体とサンセリフ体も日本語とほぼ同じ感じで、

セリフ体は、縦線が太くウロコがある書体で、サンセリフ体は縦横の太さが同じでウロコがない書体のこと。

 

知らなかったんだけど…

サンセリフのサンは「ない」という意味で、セリフ=ウロコという意味らしいです。

 

では、私にとっての本当の本題、"書体を選ぶときの選びかたは?”

勉強した内容をざっとまとめよう。

 

①長い文章には可読性の高い「細い明朝体」が適切。英語の場合は「細いセリフ体」

標準搭載のフォントならば、win→MS明朝、macヒラギノ明朝。

「細め」のフォントという点がポイント。その他のフォントでも細めであれば可読性は高くなる。

 

②プレゼン資料(ポスター)タイトル・見出しには「ゴシック体」「サンセリフ体」が基本

プレゼンやポスターの場合は、可読性よりも遠くからでもしっかりと字が読める視認性を重視する。画面やスクリーン上では明朝体が読みにくくなるので注意。

タイトルや見出しの場合は、一瞬で内容を把握できる「視認性」を重視するので本文が明朝であってもゴシック体を用いるのが基本。

 

▼参考サイト

http://tsutawarudesign.web.fc2.com/yomiyasuku1.html

 

時間がなくなったので今日はここまで、つづきはまた今度!

 

 

 

 

 

 

 

 

【7日目】キャッチコピーの基本

今日はキャッチコピーについて書こうと思います。

キャッチコピーについてのいつか本1冊位は読んで勉強したいな。と思いつつ今日まで来ました。

今日、ついに私はキャッチコピ-について勉強しちゃいますヨ。

 

では、話は昨日に戻り復習から。webデザインの代表的なレイアウトパターン。

 

●Zパターン

左上―右上―左下―右下

Zの文字上に目線が移動。

 

●Fパターン

左上ー右上ー左端に戻り―下に移動―水平移動

まずは、左上から右に見て、

左に戻って下に向かってざっと確認。

で、また左上から右に向かって水平移動して見ていくって感じ。

わかる。わかるわ~。私このパターンっす。

下まで見て、また上に戻って水平移動する時は、一回目より水平移動の目線が短い。

Fの2本めの横線のようにね。

 

グーテンベルクダイヤグラム

左上から右下方向へ、斜め読み的な感じ。

右下へ移動していく過程でチラチラと左右を確認して下に向かっていく。

 

重要なのは、この導線上に読んでほしい情報を配置して、主導権を握る!

 

さて、では今日の本題キャッチコピー。

コピーライティングの世界でよく言われる80/20ルールというのがあるらしい。

内容は有名なパレートの法則「売上の80%は、20%の優良顧客が占めている」ていうパレートの法則と同じ感じ。

それを広告のキャッチコピーに当てはめて、キャッチコピーに目を留めた人のうち、20%が続きを読み、残り80%は興味を持たずに離脱するという法則。

 

優れたキャッチコピーは、この20%をもっと引き上げる!

10人のお客様に対してこの定義を当てはめてみると、2人が興味を持ち続きを読み進める事になる。

でも、優れたキャッチコピーを書くことで、3人(30%)が興味を持ったとすると、

これだけで売上は1.5倍になる!

キャッチコピーはめちゃくちゃ重要なのです。

 

では、優れたキャッチコピーを書くためにはどうしたらいいのか?

それは、コレまで高い反応率を稼ぎ続けているキャッチコピーの基本の型なるものがあるよう。この基本型に忠実にキャッチコピーを作成すれば誰でも優れたキャッチコピーが書けるという心強いものがあるそう!!

 

では早速、その心強いキャッチコピーを。

30パターンもあるのでリンクにしておこう!!


キャッチコピーの基本型30

 

仕事でよく使いそうなものをピックアップしておこう!

 

型14.役に立つ情報を提供する
手間をかけずに若返る方法をお教えします。

 

型15.エピソードを伝える
もっと良い仕事を得て年収を増やす方法型16.「○○する方法」とする

 

型22.「これ、この」で始める
これが、日本で一番静かな全自動食器洗い機です

 

型29.質問形式にする
あなたは、次のような間違ったマネジメントをしていませんか。

 

※参考にしたサイト

キャッチコピーの基本型30

 

【6日目】デザインにおける視線誘導のお話

余談だけど、今日はすごくいい実体験をしたのでメモ。

朝、お昼のお弁当を買いに行った時の話。

 

いつも通り「どーれーにーしーよーうーかーな」ってやっていると、

「500kcal以下のお弁当」というシールが目立つところにはられた新商品のお弁当が!

迷わずコレにしよう。と思う反面、”他のお弁当って全部カロリー500キロオーバーだったんだね"と思ったわけですよ。

 

でもでもー、和風のお弁当とかも合ったよなー。一体カロリーはどれくらいなんだ。

という思いが沸々と湧いてきて、調べましたよ!!

そして判明、500kcal以下のお弁当は前から販売している物にも3種類あるではないですか。

 

何が言いたいかと言うと、需要にハマったアピールが如何に重要かってことよ!

だって、シールが貼ってあるだけ。ただそれだけで、それを求めてる人はなんの疑いもなく買っちゃうのよ。他にも500kcal以下でもっと安い(そう、値段もやすかった)お弁当があるのにね。

比較ぐらいさせてよ。って思うよね。500kcal以下のお弁当全部にシールを貼ってくれれば、その中で比較できるのに。これぞまさに見事な誘導でした。

 

では、恒例の復習から、キーワード別デザインの特徴。

内容が多かったので、復習は「かわいい」と「にぎやか」にしようかな。

 

■かわいいデザインの特徴

・余白多め、重要な文字は大きめ

・かわいいを象徴するパーツを配置

・丸みを強調

・手描きやクレヨンの質感

 

■にぎやかデザインの特徴

・ところどころにグリットを無視した大胆な配置

・彩度の高めの暖色を中心に、配色はやや多め

・文字のジャンプ率はかなり高めでOK

・背景に大きめのパターンを敷き詰める

 

では今日のお勉強、視線誘導のお話。

webデザインでよく使用される、ユーザーの視線の動きを予測して、

効果的にコンテンツを配置する代表的なレイアウトの代表的なものを3つまとめてみよう。

 

■Zパターンレイアウト

左上→右上→左下→右下

紙媒体

 

■Fパターンレイアウト

左上→右上→左端に一旦戻る→下に移動→また水平移動

 

グーテンベルクダイアグラム

左上から右して方向へ、チラチラしながら移動

 

この法則を踏まえ、効果的にコンテンツを配置すればいい。という単純なことではない。このユーザーの導線を踏まえた上で、コチラ側が見てほしい情報を提案したり、じっくり読んてみたくなるように配置するのが重要。

営業トークとかでもよく言われる、まさに「主導権を持つ」ってことだな!!

参考にしたサイトによくわかる説明があったのでメモメモ。

 

●動線→お客様の視線の動き

●導線→サイト製作者が動線を踏まえたうえで、お客様を目標に導くように仕掛けを施した動きの線…レイアウト。

 

もう一つ、配色による視線誘導で面白い記事があった。

それぞれちがった色で横並びのカラムを作成する時の配色の注意点。

(並列情報をさまざまな色で配置する場合)

 

左に誘目性の高い色を置くと、左から→に視線が流れる。

左から、2つめや3つ目に、この彩度が高く誘目性の高い色を置くとそれより

左側は読み飛ばされてしまう。

 

コレもメモしておこう。

 

今日はここまでにしよう。

 

▼参考にしたサイトたち

webデザインにおける視線誘導のおはなし | 07design.blog

WEBデザインの動線と導線 - ウェブ屋 Junonet

ウェブページを見る目の動きは「F」パターン - GIGAZINE

 

 

 

 

 

 

 

 

【5日目】キーワード別に見るデザイン

まずは昨日の復習。

画像の使い分けについて。

jpg

写真、グラデーションのある画像。捨てるタイプの圧縮方法のため保存のたびに劣化する要注意!

png

解像度の低い写真。ロゴなど色数が少ない画像に適する。

gif

gifアニメーションで使う。その他で使用するならばpngでよいのでは!?

 

という感じかな。

 

では、今日の本題。

今日はちょっと興味深い記事を見つけたのでそれを紹介する形で。

デザインをキーワード別にだれでも理解できる言葉でまとまっているところがステキ。

デザインに関する勉強メモが見つかったのでシェアします! | ITキヲスク

 

上記のサイトの中から、キーワード別に見るデザイン部分を引用させていただきいます!!

このサイトでは、この引用以外にも、配色とかレイアウトとか沢山の情報が

まとめられていたので、また改めてじっくり読もうと思います。

かわいい

・花や星やキラキラなど、かわいらしさを象徴するパーツを随所に用いる。
・円形、角丸、ポップ体など、「丸み」を強調する。
手書きフォントやクレヨンの質感などもかわいらしさを表現できる。
・余白は多め、文字も重要部では大き目が良い。

やさしい

・暖かな中間色や柔らかな暖色など、「低彩度、高明度」が向いている。
・[かわいい]ほどではない程度に「丸み」を意識する。
・有色の光彩やぼかしなども、柔らかな印象を与える。

クール

・余白を贅沢に、大きく使う。
・無彩色をメインにして、アクセントには高彩度、高明度の指し色を1色が良い。もしくは指し色の1色を大胆に使い、他はすべて無彩色も良い。
・細めの書体が合う。特に明朝。
・自然的なテクスチャーの使用は控え、使うなら金属のような人工的で整然としたものを選ぶと良い。

ゴージャス

・深みのある色をメインにする。グラデーションも良い。
・上質で高級感のある実在のオブジェクト(宝石や庭園や花など)をメインビジュアルにすると良い。
・キラキラしたアクセントを入れると一層雰囲気が出る。

ロマンチック

・ピンクを加えた高明度の配色が効果的。
・「丸み」ではなく「曲線」を強調すると良い。
・モチーフの透過やぼかしなどが合う。

シック

・「シンプル」を念頭に、余計な装飾は省く。
・明るめの灰色とアースカラー系が合う。
・余白を大きめに取る。
・比較的やや太めのフォントが向いている。

上品

・やや高明度の寒色をメインに、あまりコントラストをつけない配色が良い。
・細めのフォントや欧文表記が似合う。
・ところどころにかなり薄めのテクスチャを配置すると雰囲気が出る。

神秘的

・紫や青系の色をメインに、少し濃い目のダルトーンが合う。
・シンメトリーのレイアウトが向いており、さらにやや複雑な構図だと一層雰囲気が出る。
幾何学模様やシンボリックなアイコンを随所に入れると効果的。
・やや明確な光彩やぼかしが有効。

にぎやか

・キービジュアルやナビメニューなど、ところどころでグリッドを無視したような大胆な配置をすると良い。
・彩度の高めな暖色(話し声を感じさせる黄色系は特に重要)を中心に、配色数はやや多めの方が良い。
・背景に大き目のパターンを敷きつめると効果的。
・ややキツめのパースをつけると、一層にぎやかさが強調される。
・文字のジャンプ率はかなり高くても良い。

楽しい

・イラストやイラスト風アイコンを多用すると良い。
・高彩度の色をやや多めに使うと雰囲気が出る。補色も重要。
・モチーフやコンセプトに関連するオブジェクトを枠や背景に使うと効果的。
・ロゴ部や写真表示部などにも細工(ガラスに曇り、留めにピンなど)すると良い。

リラックス

・ゆったりとした余白を取る。
・流線型や緩やかなエンボスなど、少し「丸み」を意識すると良い。
アースカラー中心の落ち着いた色味が合う。

清潔感

・白×キツ過ぎない青系をベースにして、あまり色を使いすぎず、濁った色は使用しないように。
・透過、グラデーション、ぼかしなどで透明感を出すと良い。
・コンテンツはグリッドに正確に、理路整然と並べると効果的。

信頼感

・彩度は押さえ気味にして、色数も少なめにすると良い。
・一部分に少しの角丸などを入れると引き立つ。
・全体的に文字を少し大きめにしておくと良い。
・各パーツの淵やメニュー部などに細かな手(1pxシャドウや1px境界線など)を加えると、手抜き感は出ない。

グランジ

・メインビジュアル含め、千切れやノイズ、かすれの加工を随所に織り込むと雰囲気が出る。
・グリッドを無視したレイアウトも似合う。
・基本は灰色+高彩度の濁った色。
・コンクリートや朽木のテクスチャーを大胆に取り入れても面白い。

デジタル

・スピード感を感じる写真や光のテクスチャーなどを取り入れると雰囲気が出る。
・透過した背景、ドットテイストのフォントなども良い。
・実在のデジタル機器をモチーフにしても効果的。
・配色は無彩色の濃淡+かなり高明度なアクセントカラーが似合う。

アナログ

・身近な範囲に実在するオブジェクト(ノート、ポラロイド、マグカップなど)を使うと良い。ただし光の方向(=ドロップシャドウの向き)に注意。
手書きフォントや手書き風の境界線も雰囲気が出る。
・リアルな質感に寄せていくと良い。

和風

・行書体、筆文字、縦書きといった日本固有のデザインを取り入れる。
・着物の帯の柄などをテクスチャーにすると合う。
・アイコンには家紋や和柄を取り入れ、統一感を損なわないようにする。
・配色はくすんだ黄色や緑などを中心に、鮮やかな赤でアクセントをつけると良い。

洋風

・アンティーク調のアイコンやツタの区切りなどで、中世ヨーロッパ的な雰囲気を出す。
・要所でスクリプトフォントを使うと効果的。明朝体も合う。
・あまり彩度の高い色は使わず、落ち着いた色で合わせると良い。

中華風

・唐草模様や四神や龍など、共感される伝統的なモチーフを使うと雰囲気が出る。
・赤×金が常道。寒色は避けるべき。
・コンテンツの四隅に細工(刀の鞘の柄のような枠)をしても効果的。