レイアウトのセオリー
統一する：マージン、行間、フォントサイズなどのレイアウトを構成する要素をなるべく統一する。 揃える：位置を揃える、端を揃える、大きさを揃える。複数同じような要素がある場合は、必ず揃えて配置する。 流れを意識する：目線が始 …
誰でも簡単にWebデザインで妥当な配色をする方法
下記の3種類の色を基本にして、他の色はなるべく使わないようにする。 ベースカラー：主に文字に使用する基本的な色（全体の50%~70%程度） メインカラー：見出しや強調させたい箇所に使用（全体の20%〜30%程度） アクセ …
リモートワークでの新人教育考察
どうやって新人教育をおこなっていくかという考察になる。というか新人が入ってきたのだが、どうやってコミュニケーションをとろうかと日々の試行錯誤を綴ったもの。 雑談のためのプレゼン会 この記事が参考になった。 朝礼は毎日行っ …
黄金比よりも便利な「1/3の法則」
レイアウトや写真の構成を考える時、黄金比は計算がだるい。そのため、簡単に利用できる「1/3の法則」を使用した方が楽にいいデザインができる。 全体を9等分に分ける線を引き、各線の交点にメインとなるものを配置するようにすると …
人物写真のトリミングのコツ
関節部分で切り取らない 関節部分で切り取ってはいけず、上記の部分で切り取るのがよいらしい。
Webサイトで使用する写真の選定方法について
下記を意識するとだいたいハズレはなくなる。 よく見かける写真は使わない 自然なシーンの切り抜きを使用する（変に作り込まれたり、CGがかった写真を使うとサイトのイメージが疑わしくなる） 日本人をターゲットにする場合は、日本 …
Chrome89 で Lighthouse が日本語化。あとCWVについて。
よりパフォーマンスが計測しやすくなって何より。 Lighthouse で計測することができるCWV（コアウェブバイタル） 2021年よりページエクスペンスシグナルとして Google のランキング要因になる。Google …
コントラストの小話
公的サイトにおいて、お国からのお達しである JIS のアクセシビリティ規程の等級AAに到達するためには、Web上のコントラストを「4.5：1」以上の割合にしなければいけない。 1.4.3 コントラスト (最低限) : テ …
ワニとジャンプー
コンテンツの内容をわかりやすく手法として、強調したい要素とそうでない要素を区別するために 大きさを変える 色を変える 密度を変える という手法が使用される。 このうちの、「大きさを変える」ことのそれぞれの要素の比率をジャ …
なぜエンジニアはSEO対策に興味がないか
結論、良いコンテンツを作ることこそが、SEOの向上につながると思っているから。 一端のエンジニアであれば header とか nav とか、構造化データとかそういうマークアップレベルでやるべきことはすべて理解していて当た …