ノートにメモをとるということ

人間の記憶というのは意外に短く頭の中で記憶しておこうとしても、違うことをしていれば5分以内に忘れてしまうという。
せっかくひらめきで良いアイデアをだしたのに、忘れてしまうのはもったいない。何時出てくるアイデアに対処するためにも私はノートを持っていく。

ノートに書くことといえば別に文章にしなくてもよい。「単語」だけだったり「図形」でアイデアを残しておくのもOK。見返してわかりやすいノートを心がけるということが「ノートでメモ」の醍醐味なのです。

どのようにメモをとるのか

https://www.muji.net/store/cmdty/detail/4548718218905

大きすぎず小さすぎずなノートがよくて、おすすめするのが「A5のリングノート」おそらくFamilyMartで売っている無印良品のリングノートが100円でコストパフォマンスがよい。リングノートをオススメする理由として「めくりやすさ(メモを取ることに苦痛を与えない)」とか「破りやすさ(いらなくなった情報を断捨離する)」などと色々と普通の大学ノートよりもメリットが高いのです。

もしかしてこの記事をみて実践したいと思ったら。そのリングノートの右端や左端を3cm片方開けて縦線を引いておくと便利になるかも。何をするのかというと別になんでも書くことは良くて「メモの中のメモ」として使う。日付や本文には追加できないことなどを書くスペースとして使うことで見やすさUPも狙っております。

私の場合は、いつも使うけど実際使うときに意味の分かりにくい漢字のことばなどを書くスペースとして使っております。

メモを取るということはひとつのポエム

言ってしまえばメモもひとつのポエムです。
自分のあったことを思い出すツール、そのときの日常を表すための日記として書く、こどもの時のなつやすみの絵日記みたいに思い出として残るようなメモを残すことが記憶のため。過去を振り返るためのツールとして使うと人生も変わるかもしれません。

まずは「急にひらめいたこと」だけでもメモを残しておくと面白いかもですね。

書籍で気になるものがあるなら買えばいいじゃない。

本屋とかでうろついているとタイトルとかで気になっていくものがある。例えば「メモの収納術」とか「記憶の管理の仕方」などと足を止めてしまう内容というものは誰かしらあると思う。実は足を止めてしまうというのは「自分に足りないもの」を脳内反射的にこの情報が欲しいと呟いてるから。

自分に足りない情報

目標としてはこうしたい。こうなりたい。だけども方法がわからない、向上する方法を知らないので放置している。しかしどうするべきなのか…と葛藤している状態なので薬と同じく対処するように本を読むことで、似たような境遇の人。それを超えた人(師匠・先輩)などから生きていく術を入手していくのが近道です。

どうしても合わないもの

話が堅苦しいとか、ビジネス向けで専門学的だったりと難しいものもある。パラっと読んで難しいなぁ、そういう情報を取り入れたい訳ではないと思ったらキッカリ止めれば良いと思う。

ものの見かたというのは十人十色、千差万別と違っており話のズレが生じてしまうのは仕方ありません。

足りないモノはメモする

私なら「記憶の収納術」とかでしょうか。

いつか欲しい情報が出てきたときにこうだったのか!!と思えるようにメモをしておく、そしてメモしたツールを発掘するような感じで見返すのでもいいから目を通しておく。それだけでも欲しかったもの、未来に残すことによって当時の自分にはできなかったことをできるようになっているでしょう。

webのシステムとユーザビリティを考えるのは大変難しい。

12年HTMLとCSSそしてjavascriptを弄ってwebサイトを制作しているが、最近のHTML5やCSSそして新たな記述方法が増えて頭を悩ませている。

最近では、javascriptやcssを圧縮したり排除、軽量化してモバイルユーザーや通信回線が貧弱なユーザーにもメインコンテンツの内容を読めるようにするというシステム変化は産まれているが、それを考えながらweb(PC)でもモバイルでも双方向見られるようなコンテンツをつくるのは、長年やってきた製作者でも頭を抱える仕組みである。

これから推奨されるWebシステム

大まかに言えば、styleのような装飾よりも文字コンテンツをどれよりも早く描写させなさい。阻害している読み込みは非同期(ラスト)に読み込ませるか、もしくは削除しなさいという言葉である。もちろん色々と対処法はあるが旧世代で作ったWebはデザイン優先でつくられてるため、なかなか書きなおすには辛い。旧世代でも推奨されるオススメの方法を書きたいと思う。

圧縮と最適化

Page SpeedInsight でよく言われるのが、CSSやJavascriptを圧縮しなさいという言葉。別にZIPにして保存しろというわけではない。サーバー側が圧縮してくれるシステムがあるので紹介しよう。

.htaccess に AddOutputFilterByType DEFLATE を記入する

もちろんこの圧縮を許可してないサーバーでは使用は出来ないが、自身で圧縮するよりも簡単で自動的にサイズを圧縮してくれる。

AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf 

キャッシュをするように .htaccess に書き込む

これは昔からある技術だが、ブラウザにキャッシュをするように命令を送ることによってその期間の間はサーバーから情報を毎回もらうのではなくブラウザに保存された情報で処理をするようになりより速く読み込めるようになる。

ExpiresActive On ExpiresByType text/css "access plus 7 days" ExpiresByType image/gif "access plus 7 days" ExpiresByType image/jpg "access plus 7 days" ExpiresByType image/jpeg "access plus 7 days" ExpiresByType image/png "access plus 7 days" ExpiresByType text/javascript "access plus 7 days" ExpiresByType application/javascript "access plus 7 days" ExpiresByType application/x-javascript "access plus 7 days" 

CSSファイルやJavascriptの最適化

機械で読む構文は、構文になってれば変わらないので、ぺちゃんこに圧縮して読ませてくださいということ。

ぺちゃんこCSS ( 圧縮CSS )

CSSファイルでも500Byteの差しかないので圧縮するような方法を持ってない方とかデザインを著しく修正する製作者は後回しでもよいかもしれません。

画像の圧縮化と最適化

Webのサイズの90%を占めていると言われている画像ですが、適したサイズと圧縮率を使えば100〜500KByteも節約することができるということ。対処法は簡単で、Webに表示されている「縦横のサイズ」と同じファイルを製作するとよいらしいです。

例えば、圧縮率(Jpeg)は画像の劣化がさほどない85%を使用し通過ファイルであるGIFはなるべく使わずPNGにファイルにし、ユーザーにもサーバーにも優しい通信を心がけることと言っております。

デザイナーサイトや写真を使うようなサイトでは表示を劣化させたもの。本物のファイルは別に用意してクリックした時に読み込ませるような方法を取ると良いらしいですね。

javascriptの非同期化とjQueryの非推奨

コンテンツの読み込みを阻害するjavascriptはなるべく非同期化をしasyncなどを使ってなるべくコンテンツを読み終わったあとに読み込ませる。

そしてhtmlと共存をして読み込んでスタイルを形成するjQueryは「なるべく使わない」ということです。

async

javascriptの外部呼び出しファイル(js)の記述文の中に async 設定を行うというもの。

<script type="text/javascript" src="hoghog.js" async></script> 

これを記述することによりhtmlが読み込まれてからjavascriptの構文が走ります。その代わり最後に読み込まれるため、動的コンテンツが反映されないなど問題点もあります。

ユーザービリティ

パソコンでもスマートフォンでも見られるようにするというもの。昔はjavascriptで端末の判断を行っていましたが、最近ではCSS3になりCSS内で表示しているサイズの判断(media Query)を行えるようになりました。

CSS サイズ判断に必要なもの。

サイズの判断に伴い書く構文がファイルごとにあります。
htmlに「meta viewport」とCSSに「media screen and (size)」を書く方法です

htmlファイルに書き込む内容

<meta name="viewport" content="width=device-width"> 

CSSファイルに書き込む内容

@media screen and (max-width: 700px) { body { -- 処理文 -- } } 

ほかにも様々な処理方法

ここにご紹介しきれない程の処理方法を紹介されているサイトもあります。
https://dev.classmethod.jp/smartphone/device-media-queries/

HTML5

HTML4まではdivで成形したりh1などの見出しタグで読みやすく解りやすい記述を心かげたであろう。HTML5ではdivはスタイルを形作るものではなく文をまとめる箱的なもの。そのかわり<header><nav><article><section><footer>などの新しいタグを使ってメカニカルな内容を読ませようということ。

主にSEOに効果があり、どれがメインのコンテンツなのかサブコンテンツそれともメニューなのか判断させる事ができます。

詳しいサイトはたくさん有るので、どのタグがどのような効果を生み出すのか説明します。

<header>

<head>タグとは違う存在。主にタイトルやヘッダーとして書く内容を記入します。

<nav>

navigation (ナビゲーション)の略。メニューを表記する時に囲います。

<article>

日本語名で「章」ブログで言えば1記事のこと。

<section>

日本語名で「節」この記事で言うと「これから推奨されるWebシステム」「ユーザビリティ」「HTML5」の項目がsection 主に<h2>と共存して使われることが多いです。<article>タグの中に入れ子になります。

<footer>

頭があれば足もある。最後に記入する項目です。主に「Copyright」が書かれます。

他にもあるけども

補足の<aside>などもありますが上の5つを上手に使えば綺麗にまとまる気がします。今まで<div>の中にidやclassで設定してたと考えると専用のタグがあるので利便性も向上することでしょう。

まとめ

Google Page SpeedInsightで直した方がいいよと言われているものだけ紹介してみました。.htaccess に関しては対応していたら記入させてあげると良いかもしれません。

綺麗な読みやすいコードとWebでのユーザビリティを考えるのはなかなか長年やっていても難しいことだと改めて実感しました。少しでもユーザーに対して考えてみると顧客も増えるのかもしれません。

ウォルト・ディズニー展で学んだこと

日本未来科学館で開催しているディズニー・アート展に行ってきました。


http://www.miraikan.jst.go.jp

ウォルト・ディズニー社で働いているイラストレーターさんの原画や背景などを見ているとしっかり描いている反面。スケッチ絵が原型がないくらいあっさりとしている人もいて勉強になりました。ただデッサン力は素晴らしく、マグマの気泡をインクを沸騰した釜で用いたりしていて、流体なのにしっかりと書き込みをしつつ、その気泡が崩壊する時間までストップウォッチを用いて不自然の無いようにアニメーションをつくるという巧みさに惹かれました。

勉強になったこと

今回勉強になったことと言えば「作品を継続してつくるという気持ち」と「しっかり書き込むところは書き込む」という点でしょうか。割りと満足したところで終わってしまうのが自分自身の欠点でありつくづくとダメだなと感じでおります。今回のようにアニメーションという面白さを見てきて、モノを動かして動画作品にするということもデッサン力が上がるひとつかもしれませんね。

毎日メモをとるということ

本屋でお仕事してると人がいないときにちらっと本を読んでしまうことがある。
最近読んだのはスケジュール帳などに今日したこと思いついたことをメモする癖をつけようという本である。

単なるお仕事だとしても良いことがあったり嫌なことがあったりと様々、でも次の日には気分も考えこともリセットされるのが人間であって記憶としても段々と薄れてしまいがち、そうならないためにも記憶の断片としてメモをとる。苦手な人はスケジュール帳にやったことをタイムライン形式にしていくそれだけでも脳が活性化していくみたいです。

今日のこと

春アニメ

そういえば今年の春アニメが決まりましたね。
見るのは「アイドルマスターシンデレラガールズ劇場」「有頂天家族2」「アリスと蔵六」くらいでしょうか。

有頂天家族といえば森見登美彦さんの作品ですし、最近放映されている映画の「夜は短し歩けよ乙女」の作者ですね。和を題材にしたコメディアニメは好きなのですが文庫の表紙画風でアニメ作られててあの画風で動くという苦手意識があり映画をみるには至ってないという状況です。しかし「有頂天家族」の画風は話題アニメ(君の名は)のような絵柄なので、こちらの作品にはのめり込めそうです。

欲しい本

「大正箱娘 ~ 怪人カシオペイヤ ~」が発売されたので初月あたりに購入します。

大正箱娘-怪人カシオペイヤ-

大正箱娘-怪人カシオペイヤ-講談社タイガ-紅玉-いづき

大正時代の浪漫。って何か日本文化とハイカラ文化がいい具合に混ざった時代で見るのも読むのも好きです。こんな時代背景を作品に投入できればなとつくづく思いながら読ませていただいております。

徒然

こんな感じでこの日記に思ったことを呟ければと、3日坊主。渡り鳥のようにその場で居座ることができないタイプですが自分への「メモ」として残していきたいですね。