CSS入門

プログラミング案件は意外と面倒なわりに儲からない

　CSS（参照）とは段階スタイルシートの略で、 2021年現在はHTML5とCSS3が出来ないと、仕事を発注しないというのが現実だろう。反対に言えばこれらとJavaScript以外はあまり必要とされない。

　なぜなら世の中は中身よりも見た目なのだ。「だがアニメーターなどは年収が250万円ほどと儲からないではないか！」という意見もある。

　それはサラリーマンで決定権を握られているからだ。儲からないプログラマーもこれで会社に所属していたら儲からずに疲弊する。

　今の時代はネットで個人で優れていれば儲かる時代だ。ただし見た目の良さや面白さなどが圧倒的な力がある。

　だから真面目なプログラミングは注目されずに儲からない。真面目というか従順では人生は大損する。みんなや年上の言う事は無視した方が安全だ。

　プログラミングが出来ると凄いと思っているのは、PCも使えない無知な老人らだ。だが一番安全に儲かるのは、こういう無知な大企業の老人管理職から仕事をもらうと、 ケチって8割完成しても気分でタダ働きなドタキャンをする。これを回避する方法は１つだけしかない。それは⋯

独自性があるブランディングか投資をするしか生き残れない

　ブランディングとは自分をブランド化する事だ。これは今までのように恥だと思い、見栄を張った目立たないシックな事だけをしても儲からない。

　或いはギャンブルだと思う投資をしなければ、いつまで経っても資金は増えないし、少し増えても物価の上昇で金の価値は減る。

　ただし奇を狙った雑な事をしている動画配信者などが多くいるが、現代は高度な技術と多くの知識を持つ本物のプロしか生き残れない。

　また社長の顔をホームページなどで出しているのは良いのだが、つまらない話をしているのが多すぎる。社長は客が好みそうな趣味の物凄く詳しいオタクだとした方が良かろう。

SVG+WebPとHTML+CSSこそ
多数の人が見る最重要なフロントエンドだ

　HTMLはページ構造を定義し、CSSはSVGという編集可能で線が綺麗なベクター画像も装飾をし、WebPは集客で重要な検索大手のグーグルが開発なので写真で使う。

　今の時代は特にCSSとJavaScriptのライブラリーとSVG画像でアニメーションを作るなどの、物凄く芸術的な表現をするオタクでなければ、客は興味を持たないので儲からない。

　フロントエンドとはプログラマーからするとJavaScriptなどの事を指すが、一番重要なのは動きではなく写真などの見た目だ。また多くの人は検索して見るので、大事なのは題名とキャッチコピーだ。

　会社などでまず大事なのは当然社名で、最近は昔のようにカタカナ英語よりも、日本語の方が注目されている。カタカナ英語の社名や商品名は、ここ数十年で飽きるほど増えた。

　SVGは図形なベクター画像なので写真と違い、いくら拡大しても線がギザギザにならずにキレイだ。またSVG書類は無料のテキストエディタやドローイングソフトで修正や、CSSでSVGの色を文字で指定が出来るので便利だ。

　本ページの一番上のナビバーはCSS+HTMLを使って作りJavaScriptなどは使っていない。左上の「株式会社や店サイトの作り方」とは仮名の会社なSVGの使用例で、SVGは他のベクター書類と違いWeb画像として使用できる。以下の画像はSVG書類をPNG書類にエクスポートし、横幅が約388pxの書類をHTMLで600pxに拡大してみた。

　上記のようにラスター画像を拡大するとジャギーというギザギザなどになるので、FAXもこれと同じで、メールの添付の方がマシだ。ベクターの短所は写真などの色数などが多い物は描けなく、これは描かないといけないんで例は出しづらい。

　ただし物凄く絵を描くのが上手い人がいて、輪郭の綺麗さなどのためにAI（アドビー社のイラストレーター）でマウスで描く人がいるが、これは一部の人しか儲からないし相当つらい作業だ。しかしベクターはレイヤーは要らなく修正はしやすい。

　ロゴマークと社名タイポグラフィというのは一緒の書類にしないと、微妙に文字の底ラインがズレるので気持ちが悪くなる。また文字間も特に、ひらがなは間が抜けるので字詰めをするのだが、HTML+CSSで表示は難しいのでSVGが便利だ。

　htmlのbodyは少し余白を持っているので、余白をなくす設定をCSSでしないと、このページの上記のグラデーションが効いているヘッダーや下の灰色や黒色のフッダーの横に背景の白色の余白が入ってしまう。

　本ページのCSSの設定は「company_1.css」を参考にしてほしい。特に「z-index: 1;」とはCSS同士で重なったら、上のレイヤーにする場合は数字の1をもっと大きくする。これを設定しないと例えば本ページだと、ナビの上にアニメのCSSアイコンが表示されて気持ちが悪くなる。

　また右上のナビによく虫眼鏡なサイト内の検索を付ける人が多くいる。しかし客というのは多くの情報を持っていないので無駄になる。更に「style.css」と命名している人がいるが、客名や例えば大阪城風でosaka-jou_page-1.cssやosaka-jou_page-2.cssなどの方が分かりやすい。

　上記の大きな見出しのアニメーションもCSSで作っている。これは工業の機械を突っ込むをイメージして、このような動きにした。他にもフェイドインなどもあるが、よく業務と無関係なのにオシャレだと思う外人が会議している写真を入れるのもいるが、ありきたりで逆に目立たない。

　一言でいえば、客は自分でデジカメで自社や工場や商品などを撮影し、面白いアングルや企画などを探った方が良い。下手でもそれなりに味がある。2000年頃にもいたのだが、ソフトウエアの開発会社に特許の方法を聞きにきた客が、「ヒットする商品は何ですか？」と聞いたのだが、「それは貴方の専門分野でしょ？」とは言いづらい状態だ。

　これはいくらWebサイトの作成能力が高くても、客が例えば業界の中で特別に面白かったり、高度な工業技術などを持っていなければヒットはしない。しかしWebで宣伝しなければ発見もされない。とりあえずそういう客に、本ページのようなものを見せないと始まらない。

　昔ながらのプレゼンや営業トークや会議などは無駄であり、Webページこそ早くて妥当だ。また日本の会社の特徴は「自分の会社のホームページはテンプレよりも高値でもオリジナル」や「背景は白地」にこだわるそうだ。かえってアーチストぶって雑誌の表紙のような最初のページが全面アニメは重たい。

　なるべく提案を減らし、便利な面だけを持ち出した方が良かろう。営業もよく聞くというか、メールで数多くを客に提案させてみれば良い。多くの大企業客などは無知なので、トンでもないドリームな企画を立ててくる。実現不可能な物は速攻、お断りの損切が大事だ。そんな企画は途中で駄目になり大損をする。