pecharat.com

フリーランスWEBクリエイター富樫葉子のWEBサイト

超文系のプログラミング(1)ECMAスクリプト系の話

高校1年生にしてついに数学で赤点をとり、それ以来本格的に数学が嫌いな管理人がお送りするプログラミング入門です。

文系の人でも絶対にできるようになるように書くつもり。

プログラムは数学ではありません!

数学系関数は、数学の知識が必要だが、正直WEBではあまり使わないです。

 

とりあえずプログラムという言葉から堅苦しい印象をとりのぞいてください。

もちろんこれを読むということは、やる気のある方と推察しますが

できると思うことが大切です。

 

・プログラムのことを考えるとき、忘れてはいけないこと

 

JavascriptのようなWEB上で動くプログラムには、絶対に必要なもの、それはユーザーアクションです。

ユーザーアクションとは、「クリック」「入力」などのことを言います。

これは、イベントハンドラという関数でプログラムに伝えられます。

 

ユーザーアクション:クリック→イベントハンドラ:onClick

という具合。これは割とわかりやすいと思います。

 

ユーザーが何かをしたときに

プログラムが何かをして

結果をどこかに出す

 

それがプログラムです。

 

たまにロードしただけで動き始めるプログラム、あるじゃん?!って言われそうですが

 

ロードもユーザーアクションです^^;;;;

 

onLoadというイベントハンドラを使います。

 

イベント=イベントハンドラ=イベントトリガー=関数

みたいな、適当な言葉で大丈夫です。まあ大抵の人には通じますんで。

 

ちなみに、HTMLタグにonClickをつけていなくても、クリックしたら動くプログラムがあると思いますが、

その場合、かなり「良い」プログラムです。ソース上にイベントハンドラがあることは実はあまり好ましくありません。

良いプログラムは、onLoadで最初に読み込んでおいて、「このタグがクリックされたら」というのを天上で待っていて、処理を投げ返してくれるのです。

でもまあそういうのはあとでいいですwwww

 

基本的な文法

 

イベントハンドラ(ユーザーが何かをした)

目的のオブジェクトをプログラムに渡す

場合によっては変数に入れる

処理を実行

処理結果を変数に代入する

HTMLなどに表示

 

よくあるのが、処理を返す変数を用意しわすれた。とか。

代入し忘れた。というのが

初心者に大変ありがちで私もよくやりました。

 

結果=処理;

 

これを頭にたたきこみましょう。

分岐やループはそのあとでよいです。

システムのからむ画面をうまく・速く・正しく・便利にデザイン・コーディングする方法

まずは何はともあれ、そのサービスの仕様を理解しなければならない。

ちなみに、私は新規立ち上げはしたことないので、ひたすらリニューアルの経験から語りますのでよろしく。

【まずは、ビジュアルデザインの傾向は、以下を参考にする】

・どんなサービスなの?何ができるの?ウリはなんなの?

・(リニューアルの場合)今、何が問題となっている?

・ユーザー層の傾向は?(性別・年齢・地域・職業等)

・ユーザーのリテラシーは?(低いほうに合わせるのがベスト。サポートブラウザも含め)

・どこでコンバージョンするの?

・どこで売上が発生してるの?

・ユーザーアクションは、どこにたどり着けば目標が達成される?そのための最短のアクションはどれ?

→これをもとに、CVが発生する部分、誘導させたいところを中心にコントラストを強く。読まれればいい情報は上品に飽きないようなデザインにする。

バナーとか、リコメンドとか、副菜になるものはカラムきってどっかに追いやる。その際、テイストを損なわず、メンテしやすくしておくこと。

※インクルードファイルの使い方は覚えよう。

フッタはインクルードなのか、SEOのために自動生成するのか把握する。

・SEO担当とは仲良くしておこう。

・最終的に、SEOフッター、パンくずの設計もできるようになると重宝される。

 

【DBとコーディングとレイアウトを結び付けて考えて行く】

・どんなデータが入ってる?数字なの?日本語なの?英語もあるの?画像も扱ってる?

・画像の最大の大きさは?画像取得ロジックはどうなってる?自由にリサイズさせてもらえる?

・画像のaltはどうしてる?キャプションは必ずつくの?DBのどこかからとれる?

最大文字数(これ必須)数字も桁数。よく言われるのが、英語か数字かなんかが続くと折り返さないやつね

・必須のデータはどれ?必須じゃないけど「持ってるデータ」はどれ?両方入るようにデザインしないといけない。

・右寄せと左寄せ、交互にくればかぶらないかっていうとかぶったりするので、テキストが終わったあと、必ずマージンをつけて、その次が右寄せ、という考え方をする。

・あと箱の中に、色々情報入ってるけど、どれが抜けても最終的に余白が均等になってればかっこいいコーディング。

・フロートしまくったリストタグはページ内でセンタリングができません。※リストタグの幅が決まってるなら別。 だからページングは、実はリストタグは理想的ではない。

 

【トラブルを未然に防ぐ】

・ページの幅全部とる要素には全てclear:both;をいれる、必要なくても、かなりたくさんのトラブルが防げる

・高さの同じ箱が続く場合、データで上下しないように、JSで高さをそろえる魔法をかけておく。

・共通事項を先に全部コーディングして、ブラウザチェックまでやっておく。

全ての要素がマークアップで個別に指定さえできれば、デザイナーにできないことはあまりない。とりあえず「必要なくても全部何かクラスかidふっておく」。もしくは、特定のIDの中にユニークなタグでマークアップしておく。

・「CSSでたて真ん中揃えはできません」を会議でなんども口すっぱく言っておく。最悪テーブルタグで対応することになるがかっこ悪いから避けたい。

【SEOってデザイナーもやるの?】

・できたほうがいい。一番大事なのは、「デザイナー兼コーダーの人」が、マークアップを最適にできるかどうかだ。キーワード選定・メタタグはSEO担当に任せておけばいい。※キーワード選定は企画段階で決まってないと意味ないけどね

たとえば、altを忘れないとか、隠しテキストを使わないとか、Hタグで重要な部分をマークアップする、プレーンテキストはPタグで囲むなどなど。

文書構造を正しく理解していることがとても大事。タグの知識は必須。

「ここは見出しです」「これはその中の更に下の見出しです」「これは説明文なのでテキストです。パラグラフのPでマークアップしました」「この単語は重要なのでstrongタグでマークアップしました」「これは、項目を並べているのでリストタグでマークアップしました」

と理論的に説明することができ、構造が正しいと、グーグルは「正しく書かれている、ユーザーに実益のあるページ」とみなすようだ。

CSSはあとからついてくるので、それほど頑張らなくてもいいが、実は時間かかるのはCSSの実装だったりするんだけどね。CSSはデザイナーしかわからない、っていう会社はすごく多いが、その分、プロフェッショナルとしてDWを酷使して頑張ろう。

経験したバグは、エヴァーノートやブログにまとめておこう。あとで参照できる。

【ここまでやっても、まだ求められる美しさ。】

こんなに色々やってあげてるのに、上司はそれでも見た目をすっごく気にしてる。SEOもやって、コーディングも正しくやって、自分でリンクもチェックした。上司は見た目だけ気にしてる。すごい腹立つ時があると思う。でもこれが、デザイナーの腕の見せどころなのだ。

凝ろう。

何に凝るか?それは、1ピクセルにだ。

くだらない話と思わないでくれたまえ。たとえば、罫線の薄さ。罫線は薄くないといけないが、視認はぎりぎりできないといけない。でもそのギリギリ感が上品なのだ。

ボタンのクリエイティブ。

今、1ピクセルの枠で囲むのが流行ってる。なぜか?トレンドもあるが、メリハリがつく割に上品だからだ。もうグラデーションやリフレクションの時代は終わろうとしている。

1ピクセルの枠に、1ピクセルのハイライト。1ピクセルの反射に、1ピクセルのシャドウ。これがかっこいいとみなされるし、私もそう思う。

そして次に凝るのが、だ。

最近はコントラストが薄いのが流行りだ。でも薄ければいいものではない。CVが発生する部分は強調しよう。あくまで上品にだ。そして、文字色も、違和感のない色相内で、「割と補足的な情報」を色を薄くし、フォントサイズを下げるとすごくかっこよくなる。

色でコントラストをつけることもできる。全体的にピンクな画面に、ボタンだけ明るい青っていうのもありだ。ボタンの色がどれがいいかなんて議論は、絶対にあってはならない。

ボタンの正しい色は、コントラストが他と違う、「目立つ色」なのだ。目立たなければ、気づいてもらえない、押してもらえないのだ。

全体で配色を考えなければならない。理論的になろう。色彩学をがんばらなくてもいいが、明度、彩度、色相の意味を知ろう。

コントラストをつけるためには明度を下げるのか?彩度を上げるのか?色相で補色をあえてとるのか?少しずらすのか?そういう考え方だ。

ラフ案をモノクロでつくることをオススメする。先にコントラストを全部グレースケールで見せる。その後、色をつけていけばとても簡単だ。

>上司&プログラマーへ

こんなにデザイナーちゃんたちはがんばってるので、たまにはほめてください。

すごい仕事してると思います。プログラマーは確かに分岐ばっかりで嫌になってると思いますが、マイク●ソフトに振り回されてるのはおいらたちです。

 

ブラウザなんて一個になればいいのに(゚д゚)