篠崎 光徳

Webサイト制作が得意なエンジニアです。 https://www.smitsunori…

篠崎 光徳

Webサイト制作が得意なエンジニアです。 https://www.smitsunori.com/

仕事で大事なテキストコミュニケーション

Web制作の仕事を始めてぶち当たった壁の一つがテキストコミュニケーションでした。 メールやチャットで要件を伝えようとして、なんだかスムーズにやり取りできない…という感じです。要点が相手方にうまく伝わらなかったり、逆にちょっとした誤解が生じて説明が大変になったりでした。 「普通に考えればできるでしょ」と言う人もいますが、その普通が分からないので困ったものです。当時の自分に分かりやすく説明する気持ちで以下書いてみます。 自分が考えた順に書いていた特に意識しないまま、自分が考

篠崎 光徳

    • イマドキのCSSを学ぶ難しさ

      Web制作をやる上で欠かせないCSSですが、柔軟な上に進化が速く、学び始めの時に難しいと感じました。何が難しかったのか自分なりにまとめてみたいと思います。 CSSのおさらいカスケーディングスタイルシートのことですね。HTMLの見た目をCSSで行うことで、コンテンツ（HTML）と見た目（CSS）を切り離して管理できるという仕組みです。名前に「カスケーディング（継承）」と入っているように、指定したルールを親要素から子要素に継承しながら記述できるのが特徴です。 書けば見た目にす

      篠崎 光徳

      • HTMLをゼロから身につけるとしたら

        HTMLを身に付けたい！という時、大抵何から始めれば良いか分からないです。自分だったらどうするかな、という話です。 HTMLのとっつきにくさWeb制作においてHTMLは必須かつ基本の要素です。ですがCSSやJavaScriptが使われていないHTML単体で出来ることはとてもシンプルなため、これで本当にWeb制作出来るようになるの？という気分に襲われます。 見出しが <h1> で…文章が <p> で…と知識としては増えていくのですが、それで何かが作れるようになるように感じら

        篠崎 光徳

        • Web制作は確認が9割

          タイトルが出落ちですが、ともかくWeb制作は確認がとても大事です。ミスをしにくい作業と確認の話をします。 人はミスする制作しているとミスをします。実装上の不具合もありますが、それより誤字や抜け漏れなどコンテンツ部分のミスの方が多いような気がします。 テストアップ後などに指摘が入り、見返してみると「これは気づくやろ」というようなミスをしていることがありますね。偉い人や著名人の画像に対して全然違う名前を入れていたりして、技術力以前の気まずい間違いをやらかしたりします。 数が

          篠崎 光徳

        仕事で大事なテキストコミュニケーション

        篠崎 光徳

          Web制作をスムーズに終わらせる

          仕事をスムーズに終わらせるために変更に強い実装をしておきたい、という話です。 仕事が終わらないときWeb制作をやっていると、公開・納品直前は夜遅くまで仕事するというのもザラでした。こだわりを詰め込むためにギリギリまで粘るとかの話ではなく、急な変更対応に時間がかかってしまうというパターンです。 「うわ〜ここ変更するか〜」みたいな変更で、それによって他の実装も変更になり…という感じで時間がかかっていたようなイメージです。 ただこうした対応も、長くやっているとだんだん減ってき

          篠崎 光徳

          Web制作をスムーズに終わらせる

          篠崎 光徳

          エンジニアの学びとマインドブロック

          新しい技術を取り入れる時に立ちはだかるのはメンタルな壁かもね、という話です。 もともと何も知らなかった自分は元ミュージシャンという経歴なので、Web制作については本気で何も知りませんでした。HTMLって何？というレベルです。 30代の転職を機に学習し始めますが、得意なことなど一つもありません。全部知らないのでとにかく勉強&予習をしながら課題を解決していきました。得意なことが無いので、逆に「これは苦手」というものもありません。全部フラットに知らないという状態です。 そんな

          篠崎 光徳

          エンジニアの学びとマインドブロック

          篠崎 光徳

          レイアウトを決めるのはブラウザだ

          Webレイアウトの最終アウトプットを決めるのはCSSではなくブラウザだよ、という話です。 情報は流し込むものWebレイアウトを実現するHTMLは情報を入れるハコにすぎません。情報に合わせてHTMLをマークアップすると、上から順にHTMLタグに応じた見た目で表示されます。 それをCSSでスタイリングしていきます。文字のジャンプ率やレイアウトのカラム数などをコントロールし、画像と組み合わせるなどして魅力的なデザインにしていきます。とは言えベースはHTMLですので根本的な情報の

          篠崎 光徳

          レイアウトを決めるのはブラウザだ

          篠崎 光徳

          文字サイズから考えるデザイン

          「Webは文書」という考え方でWebデザインを見ると、文字サイズを起点にレイアウトを考えられそう、という話です。 CSSで使える単位CSSではさまざまな単位が使えます。画面上の距離を基準とした「px」、画面幅を基準とした「vw / vh」、親要素を基準にした「%」などです。その中で文字サイズを基準とした「rem / em」に注目してみましょう。 一文字のサイズを基準にするのが「em」です。大文字の「M」の活字が文字の縦横幅をいっぱいに使うことに由来しているそうです。 「

          篠崎 光徳

          文字サイズから考えるデザイン

          篠崎 光徳

          エンジニアから見るデザイン

          デザイナーとエンジニアでデザインを見るポイントが違うなと思うことがある、という話です。 材料はHTMLエンジニアがWebサイトを作る際、材料はHTMLになります。見出しや本文や箇条書きです。 見出しや本文で構成していく文書といえば、このnoteやconfluence、notionなんかもそうですね。ルールにしたがって情報を流し込んでいくとコンテンツが出来上がります。 そうして出来上がった文書構造がそのWebサイトで伝えたい情報の本質だ、とエンジニアは考えています。 C

          篠崎 光徳

          エンジニアから見るデザイン

          篠崎 光徳

          文系のメガネで見るエンジニア

          エンジニア一筋ではないキャリアパスの自分からみたエンジニアたちの話をします。 エンジニア世界の外から来た自分自分がエンジニアになったのは30代で、それまではミュージシャンとして生き、趣味は映画・読書と文系の属性で生きてきました。 映画も読書も「完全に理解する」ことを必ずしも求めるわけではなく、一部分でも気に入ってくれれば良いという作者も少なからず存在します。見る側の解釈もさまざまで、むしろ解釈することを楽しむような受け手も存在します。 そうした領域にどっぷり浸かっていた

          篠崎 光徳

          文系のメガネで見るエンジニア

          篠崎 光徳

          マークアップエンジニアという肩書き

          Webサイトを作る「だけ」のエンジニアとしては、プロダクトを作るフロントエンドエンジニアとも違うようで、どこか半人前な気分になることがあります。　 マークアップエンジニアとは主にWebサイトの領域でコードを書いて動くものを作る人、という感じでしょうか。言葉として近そうなのは「コーダー」かもしれません。 ただコードを書くといっても、WordPressやMovable TypeなどのCMSからnodes.jsを使ったビルドツールも使います。昨今ではGatsby.jsやAstr

          篠崎 光徳

          マークアップエンジニアという肩書き

          篠崎 光徳

          最初に知りたかったWeb制作の勘どころ

          今になって思う、エンジニアになりたての頃に知っていたかった勘どころをいくつか書いてみたいと思います。 テキストはフローする「フローする」という表現は独特ですね。流し込まれて表示される、みたいな感じです。 HTMLのテキストは、表示デバイスの幅やテキストの分量によって自在に折り返します。この文章もそのように表示されているかと思います。これを意識できてないと、レスポンシブレイアウトやテキスト差し替えに対応しづらい実装になってしまいます。 テキストがフローすることを想定した実

          篠崎 光徳

          最初に知りたかったWeb制作の勘どころ

          篠崎 光徳

          エンジニア駆け出しの頃の話

          未経験から30代でエンジニアになってすぐの頃、何も分からない時にどう立ち回ってたか。そんな話をします。 覚えること多すぎ一般的にWebサイトを作るエンジニアというのは、いわゆる広く浅く系の知識が求められる領域だと思います。 HTMLやCSSに始まり、変化をつけるためにJavaScript、WordPressやるならPHPも少し、といった感じです。 この「浅いけど広い」というのは何も知らない自分にとっては強敵でした。何から学んでいけば良いか全然分からないんです。どれも少し

          篠崎 光徳

          エンジニア駆け出しの頃の話

          篠崎 光徳

          30代からエンジニアになった話

          30代でまったくの未経験からエンジニアになった経験を話します。 当時手持ちのスキル20代はミュージシャンをやっていて、エンジニアリングとは無縁の生活でした。 実家にあったPCで遊んでいてタイピングは少しだけできたり、iPod世代でMacユーザーだったりしたくらいです。 ミュージシャンをやめたあと、趣味で海外アーティストのインタビューを翻訳するブログみたいなのを作りました（今はない）。この時無料だからという理由でWordPressを選んだのがその後のキャリアのきっかけにな

          篠崎 光徳

          30代からエンジニアになった話

          篠崎 光徳