mintsu's blog

ノンデザイナーズ・デザインブックを読んだ感想

2020-05-27 14:00:00
書評

ノンデザイナーズ・デザインブックを読んだ感想

ノンデザイナーズ・デザインブックという書籍を読んだのでレビューします。
デザインを正式に学んだことがないが、デザインする必要がある人のための本です。
私はデザインと言うと感覚的なイメージを持っていましたが、この本では論理的に説明があり目からウロコの内容でした。
読了後はデザインに対する意識が変わりました。

目次

レビュー 感想

おすすめ度: ★★★★★

読む目的

デザインは学んだことはありませんが、仕事でのパワーポイントでの資料作りや、Webサイト作成などデザインが必要となる機会は多くありました。
その都度いつもデザインには悩まされなんと「なくこうしたほうがよさそう」や「なんか変。。」のような感覚で試行錯誤していました。

こういったデザインをする機会はこれからも多くあるので一度デザインの基礎を学んでみたいと思っていました。

その中で選んだ本がこの「ノンデザイナーズ・デザインブック」でした。

この本は、デザインを正式には学んだことがないけれども、デザインする必要がある人達のために書かれました。

※ ノンデザイナーズ・デザインブック p10 より引用

章立て

前半が「デザイン原則」、後半が「タイポグラフィ」の話になっています。

  • 1.Design Principles デザイン原則
    • イントロダクション
    • 近接
    • 整列
    • 反復
    • コントラスト
    • 4つのデザイン原則の復習
    • カラーを使ったデザイン
    • おまけのチップス & トリック
    • 日本語によるデザインサンプル
  • 2.Designing With Type 活字でデザインする
    • 欧文タイポグラフィの基本
    • 活字(と人生)
    • 活字のカテゴリー
    • 活字のコントラスト
    • 和文のための補足
  • 3.Extra
    • 参考になりましたか?
    • 回答と回答例
    • この本で使った書体

4つの基本原則

前半では良いデザインに必ず見られる基本原則の説明がなされています。

  • 近接
    • 関連する項目をまとめてグループ化する
  • 整列
    • ページ上のすべてのものを意図的に配置しなければならない
    • ページ上のすべての項目が、何か他のものと視覚的に関連していなければならない
  • 反復
    • デザイン上のなにかの特徴を作品全体を通して繰り返すこと
    • 一貫性
  • コントラスト
    • 読者の目をページに引き込むために、作品の様々な要素にコントラストを付ける

上記の4つの原則をいい例、悪い例を交えて説明がされていきます。

なぜ悪いのか、なぜいいのか説明が論理的に書かれていてわかりやすいです。
また読者にも練習問題として、下記のような「違いを見つけてください」といった問が出され、読者が自然とデザインを意識するようになっています。

2番めの例のほうが、ほんの少しプロらしく見えるのに役立っている小さな違いを、8つ以上見つけててください

今までは「かっこいい」、「なんとなく違和感がある」といった抽象的な判断しかできなかったものが、言語化して説明できるようになるとデザインに対する意識がだいぶ変わってきます。
言語化して説明ができるようになれば、デザインがコントロールできるようになります。

タイポグラフィ

後半はタイポグラフィについて記載されています。

いままで文字のデザインを意識する事はありませんでしたが、こちらも先程のデザイン原則と同じように読了後は意識するようになり、文字の見え方が変わってきました。

例えば活字のカテゴリー

本書を読む前は私の中では「文字」は「文字」という認識しかありませんでした。言うなれば1つのカテゴリーしかありませんでした。
この本では下記の6つのカテゴリーに分類して紹介されています。

  • オールドスタイル(Oldstyle)
  • モダン(Modern)
  • スラブセリフ(Slab serif)
  • サンセリフ(Sans serif)
  • スクリプト(Script)
  • デコラティブ(Decorative)

それぞれの特徴について述べられていて、活字といってもこれだけ違いがあるのかと目からウロコでした。

私は、デザインと言うとグラフィックのデザインを思い浮かべてしまいますが、レポートや、ノート、ウェブページなど文字を使ったデザインは実は多い事に気づきました。
いままで文字は文字としてしか認識してなかったのでデザインの要素だと思っていなかったからかもしれません。

このタイポグラフィの章を読むと文字によるデザインを意識することができるようになり、伝えたいことをより強く伝えられるようになるかと思います。

全体を通して

ノンデザイナーズ・デザインブックという名前の通り、デザイナー以外の人がデザインの基本を知ることができる本でした。

実例が多く載っており、非常に読み進めやすく、頭にも内容がすっと入ってきました。
また所々に「問」が入っていてトレーニングをしながら読み進むことができました。

実例と解説 => 問で自分でも考える

この流れで本当に「デザイン」に対する理解がどんどん深まっていくのを感じました。

読了後はデザインに対する意識がかなり変わりました。

「ジョシュア・ツリーの悟り」という話がイントロダクションに書いてあるのですが、まさにそれでした。

一度名前を言えるようになれば、あなたはそれを意識し、支配し、コントロールし、所有するようになるのです

いままでなんとなくでやっていたデザインが、この本を読むことで言語化できるようになりました。それができるとデザインのコントロールができるようになってきたように思えます。

おすすめの対象読者

最後に私の思うおすすめの対象読者

  • デザインを学んだこと(意識したこと)がない人
  • ノートや資料なの見栄えを良くする方法を知りたい人

Nuxt.jsでTwitterシェアボタンやツイートの埋め込みなどのwidgetsを追加する方法

2020-05-23 11:00:00
フロントエンド

Nuxt.jsでTwitterシェアボタンやツーとのwigetsを追加する方法

Nuxt.jsなどでSPAでTwitterのシェアボタンやツイート表示のウィジェットを利用する際、ページ遷移時にうまく表示されない場合があります。

twitterのwidgets.jsの読み込みのタイミング本来は表示用のタグが挿入されますが、SPAではページ遷移時にwidgets.jsの再読み込みは行われません。そのため意図した表示になりません。

そのため今回は、ページ遷移のタイミングでwidgets.jsの読み込みを行うようにしていきます。

目次

SPAでの問題点

twitterのwidgets.jsの読み込みのタイミング本来は表示用のタグが挿入されますが、SPAではページ遷移時にwidgets.jsの再読み込みは行われません。そのため意図した表示になりません。

次のようなコードをページに入れてみます。
このタグは Twitter Publish で 「Embedded Tweet」 で作成したものです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://t.co/AcVSLgYInZ">https://t.co/AcVSLgYInZ</a><br>一応ブログを公開した。<br>しばらくはブログ改善する</p>&mdash; みんつ (@mintsu123) <a href="https://twitter.com/mintsu123/status/1104879873523277824?ref_src=twsrc%5Etfw">March 10, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このブログでの例ですが、直接埋め込んだページを開く場合は正しく期待した表示になりますが、別ページから遷移してタグを埋め込んだページに行くと期待した表示にはなりません。

正しく表示されない例
正しく表示されない例

期待する表示例
期待する表示例

本来であれば下記のスクリプトがページが表示されたタイミングで呼び出されますが、SPAのページでは遷移時にスクリプトは読み込まれません。

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

解決方法

twitterのwigets.jsを事前に読み込んでおいて、遷移したタイミングでwidgets.jsのページ読み込み後ににコンテンツを初期化する方法を使います。

wigets.jsの読み込み

wigets.jsの読み込みが必要なページコンポーネントのheadメソッド、もしくは、サイト全体で使いたい場合はnuxt.config.jsにwigets.jsの読み込みを記述します。

今回はnuxt.config.jsに記載します。

~省略~
module.exports = {
~省略~
  /*
  ** Headers of the page
  */
  head: {
    script: [
      {
        hid: 'twitter',
        type: 'text/javascript',
        src: '//platform.twitter.com/widgets.js',
        async: true,
        defer: true,
        body: true
      }
    ],
  }
~省略~
}

これでページ全体でwidgets.jsが読み込まれるようになります。

続いて遷移時にwidgets.jsのウィジェットの初期化を行うようにします。

ページ遷移時にウィジェットを初期化する

ページ遷移時にウィジェットを初期化するにはtwttr.widgets.load()関数を使います。

Nuxt.jsでページ遷移時に呼び出すにはmountedメソッドを使います。

ページコンポーネントのmountedメソッドに下記を追記します。

  mounted() {
    if (twttr) {
      twttr.widgets.load()
    }
  }

これでSPAでもページ遷移時にもTwitterのウィジェットが表示されるようになります。

まとめ

  • SPAではページ遷移時にwidgetsの初期化が必要
  • twttr.widgets.load()でウィジェットの初期化ができる

今回はツイートの埋め込みを例としていましたが、タイムラインの埋め込みや、ツイートボタンの埋め込みなども同様の手順で解決ができます。

お名前.comとNetlify DNSで独自ドメイン(サブドメイン)を設定する

2020-05-21 18:00:00
フロントエンド

お名前.comとNetlifyで独自ドメイン(サブドメイン)を設定する

以前こちらにお名前.comとNetlfiy DNSを利用して独自ドメインを設定する方法を書きました。
お名前.comとNetlifyで独自ドメインを設定する | mintsu's blog

今回はNetlify DNSを利用してサブドメインを設定する方法について記載していきます

目次

設定

Netlifyのサイト設定のページに行きます。

「Settings」 => 「Domain managiment」 => 「Custom domains」 のAdd custom domainをクリックします
Add custom domain

サブドメイン追加

サブドメインを入力して Save します

Netlify DNS を使っている場合は自分でレコードを追加しなくても、この設定だけで自動的にレコードが作られるようです。

設定としてはこれだけで完了です。

もしまだ、Netlify DNS自体の設定をしていない場合はこちらの記事で解説している通り、お名前.com管理ページでネームサーバにNetlifyのネームサーバを設定してください。
お名前.comとNetlifyで独自ドメインを設定する | mintsu's blog

最後に

Netlify DNSを使うとサブドメインの追加が非常にかんたんにできるので便利ですね。
Netlifyを使って運用する場合はNetlify DNSを利用するとDNSレコードをあまり意識する必要がなく設定が容易になるのでこちらを利用していこうと思います。