ウェブ屋の備忘録

日々の業務で工夫していることや便利なツール、新たに得た知識などを共有しています。

プログラミングは手書きで効率よく覚える

f:id:webbibouroku:20160205143117j:plain

プログラミングを覚えるために、たくさん参考書を読んで、たくさんサンプルコードを写しました。
手書きで、PCで、とどちらもやりましたが、どうも手書きのほうが頭に入るようが気がしています。

手書きからPCへ

最初は手書きでやっていました。
勉強はもっぱら昼休みに喫茶店で行っていたのですが、当時はノートPCを持っておりませんでした。
参考書を読み、出てきたサンプルをノートに書き写す。それをひたすら繰り返していました。

その後、すぐに動作を検証したいのと、より実際の作業時に近い環境のほうが身につくのでは、ということでノートPCを買いました。
昼休みになればノートPCと参考書を持って喫茶店へ行きました。
参考書を読み、出てきたサンプルをPCに打ち込む。すぐさま動作を確認することはできたのですが、コードは右から左へすり抜けていったように、記憶には残りませんでした。

手書きのほうが頭に入る理由

以下のふたつの理由で、手書きのほうが頭に残るのではないか、と思います。

1.ひとつひとつ形の違う文字を書くということ

たとえば「a」と書くのと、「a」と打ち込むのとの違いです。
独特の丸みのある「a」と書いた場合、「a」と書いたということが指先から脳に伝わる。
「a」とキーボードを打つ場合は左小指を落とすだけです。動きでいえば「q」や「z」と打つのとほぼ同じ。いま何の文字を打ったのか、ということが記憶に残りにくいのではないかと思うのです。

2.時間がかかるということ

キーボードで打つよりも書いたほうが時間がかかります。(計ったわけではないですがたぶん)
なので書いている間、多くのことを考えることができます。
「これは英語そのままの意味やな」「何回もでてきたな」などと考えながらなので記憶に残りやすいのではないかと思います。

*

人によるのかもしれませんが、僕には手書きのほうがしっくりきているようなので、しばらくは手書きで勉強してみます。 

おうちで学べるプログラミングのきほん

おうちで学べるプログラミングのきほん

 

 

ペンタブで作業効率2倍

f:id:webbibouroku:20160112164636j:plain

ある制作会社で、打ち合わせ。 その会社の打ち合わせスペースから見えた作業者は、皆ペンタブレットを使っていました。 「イラストの仕事もされるんですか」と聞くと、「いえ、マウス代わりにペンタブを使用しています」とのこと。 マウスだと、カーソル動かしたい分、動かさないといけないが、ペンタブだと座標で認識しているので、一発で目標の位置をクリックすることができるとか。 マウスよりもかなり速く作業ができるそうです。 2倍ぐらい作業が速くなりました、とも言っていました。

早速試してみたい、と思っていますが、以前「デュアルディスプレイにすると効率2倍になるよ」と言われ、早速試して、そうでもなかったことが思い出されて、なかなかペンタブを買うまでに至っておりません。

先見の明と時代の先を読んだアイデア

最近気になったウェブサイトを2つ紹介します。

Bascule

f:id:webbibouroku:20160112164437j:plain

http://www.bascule.co.jp/

制作会社のバスキュールさんです。つい最近見る機会がありました。 5年ほど前からデザインはほぼこのままなのですが、「今でも通用するデザインだな」という印象です。 5年前と言えば僕がまだ駆け出しのころ。当時このサイトを見て「すごいなー」とワクワクした記憶があります。 当時の感覚で「これは5年後も通用するデザインだな」と予感していました。 やはり5年たった今見ても素敵なウェブサイトでした。

Wix

f:id:webbibouroku:20160112164442j:plain

http://ja.wix.com/

格好いいテンプレートを提供しています。 無料でそれなりのデザインのウェブサイトが作れるというサービスです。 こんなサービスをやったら人気が出るのでは、と以前から考えていたやつです。Wixに先を越されてしまいました。

この2つの事例からわかるように、僕には先見の明と時代の先を読んだアイデアがあります。信用してみませんか?

あと、第三者が形にした後で「これ僕が考えてたやつ」と言う癖もあります。

アンチ眠気

昼ご飯を食べると、眠たくなります。 僕は仕事に集中しているので眠たくなったりしません、と強がってみたいですが、どうしても眠たくなります。 眠たくなると、歩き回ったり、積極的に電話に出たりして、まぎらわそうとします。

なんとか眠気をまぎらわす方法はないかと、試行錯誤をしているうち、エスタロンモカという薬を知りました。

f:id:webbibouroku:20160112164415j:plain

エスタロンモカ錠は、ねむけを防止する医薬品です。主成分の無水カフェインが大脳皮質に作用してねむけを除き、ビタミンB1がカフェインとともに働いて倦怠感を取り除きます。会議の時、深夜の残業、受験勉強など、ねむけをとりたいときに効果的です。

薬とかはあまり飲まないのですが、先日はじめて飲んだロキソニンというものの効き目から、あまり辛いときは薬に頼るのも悪くはない、と考えを改めたところでもありました。

エスタロンモカは、24錠入りで420円。1錠あたり17.5円。 17.5円で眠気が覚めるなんて、どれだけすばらしい薬なのか、と感動しました。 Amazonのレビューでも高評価が多く、かなりの効果が期待できそうでした。

家の近所のドラッグストアには置いていませんでした。 次の日には、通勤途中にあるドラッグストアに寄ってみました。ここにも置いていませんでした。 手に入らないと余計に欲しくなってしまいます。 僕のエスタロンモカへの思いは日に日に強くなっていきました。

しばらく経ったある日の昼休み、会社の近所のドラッグストアに行くと、ありました。 ついに念願のエスタロン・モカを手に入れました。

飲みました。

【第3類医薬品】エスタロンモカ錠 24錠

【第3類医薬品】エスタロンモカ錠 24錠

レスポンシブについて学んでみた。

f:id:webbibouroku:20160112164356j:plain

レスポンシブデザインとは

あらゆるデバイスに最適化したWebサイトを、ひとつのHTMLで制作する方法です。

基本的にページはひとつなので、目的のデバイス用にページをつくらなくてもいいから、コスト面でのメリットがあります。

実際に制作してみると、慣れていないせいもありますが時間がかかります。 工程としては大幅には変わらないが、慣れればこちらにシフトしても良いかも知れません。

では、どうやってレイアウトを振り分けているか? 参考にさせていただいたサイトがこちら。

株式会社アイ・エム・ジェイ f:id:webbibouroku:20160112164334j:plain

実際にウィンドーサイズを変えてみてください。 みるみるうちに、レイアウトが変わります。 私が確認したもので約4パターンでしょうか。 どれも素敵なデザインです。

振り分け方法は

<link rel="stylesheet" href="PC用.css" media="screen and (min-width:641px)"> <link rel="stylesheet" href="モバイル用.css" media="screen and (max-width:640px)">

でOKです。

元々、CSSの書き方が汚い私ですが、今回の案件で「改めなくては!」と思うほど書く量が多い。 レイアウト上に不具合がある場合は、HTML上にPC用とモバイル用の両方を記述して、 一方はdisplay:noneで削除、みたいな作業の繰り返し・・・。 デザインからも勉強せねばなりません。

レスポンシブデザイン普及の背景などについての記事はこちらのページが参考になります。

いやぁ、WEBの世界はめまぐるしい。 勉強しても勉強してもキリがないですが、がんばって覚えようと思います。

時代はハリナックス

わたし、ホッチキスやめました。 正確にはホッチキスの「針」やめました。

時代はエコ!時代はハリナックス

f:id:webbibouroku:20160112164340j:plain

針を使わず、書類をとじる。 パンチに似た原理で紙で紙をとじるのです。

これの利点としては、

  1. 不要になった用紙をそのまま捨てられる (シュレッターにかけられる!)
  2. 針を購入しなくても良い(ランニングコストがかからない!)

です。

不便な点といえば、

  1. 厚い書類はとじれない。
  2. ほどけやすい。

といったところでしょうか>< 指示書をまとめるときに、良く使うので私は不便さを感じません。 厚い書類は、やはりまだ針ですね・・。 発売当初、バカ売れして店頭にないことがあったそうです。

コクヨ、やるな。

Webデザイナーあるある

f:id:webbibouroku:20160112164419j:plain

Webデザイナーあるあるその1

前のデザインとあまり変えなくても良いですよ


提出

変わりばえしないので修正してください

Webデザイナーあるあるその2

簡単に済む作業です

→簡単には済まないです

Webデザイナーあるあるその2

参考にして欲しいというサイトのイメージがすべて違う

どうしたいのでしょうか。

Webデザイナーあるあるその4

ロゴや写真の元データが無い

なぜなくなるのでしょうか。

Webデザイナーあるあるその5

クライアントから提供されるイラレデータの 文字がアウトライン化されていてコピペできない

アウトライン前データも欲しいです。

Webデザイナーあるあるその6

イメージは特に無いので、おまかせで作ってください


提出

イメージと違うのでやり直してください

Webデザイナーあるあるその7

インパクト重視でエレガントなデザインでお願いします」

分かるような分からないような。

Webデザイナーあるあるその8

「いつあがりますか?」と急かすくせに、チェックバックは遅れる

まあね・・・

Webデザイナーあるあるその9

営業マンがクライアントからのチェックバックを数日間(ひどい時には数週間)、 大切に懐で温めていることがある

隠し持たないでください。

Webデザイナーあるあるその10

デザインの細かい修正内容を口頭で伝えようとする

紙に書きこんでください。

Webデザイナーあるあるその11

横位置のアタリ写真を配置したデザインを作ると縦位置の写真が届く

トリミングしたら何の写真か分からなくなります。

Webデザイナーあるあるその12

ノリにのって作業が進んでいるときに限って予期せぬエラー発生

苦労が水の泡で全部やり直し・・・

Webデザイナーあるあるその13

HTML上のテキストに対する改行位置の細かい指示が来る

だからさ。

Webデザイナーあるあるその14

コーディングが完了し、テストアップしてから、 「デザインを全体的に小さくしてください」等の根本をくつがえす修正依頼が来る

何度もデザイン確認してくれてましたよね・・・?



Webデザイナーあるある、他にもあれば教えてくださいね。

野球部あるある 新装版

野球部あるある 新装版