2021年8月のログ
目次
Photoshopの便利な機能（マッチドント、被写体・髪の毛の切り抜き方・パターンビュー）
投稿者：磯部
■マッチフォント
画像データのフォントが分からない時や、似た雰囲気のフォントを探したい時などに使える機能です。全然当たらなかったりもしますが、持ってるフォントとadobefontから似てるフォントの候補を出してくれます。
https://helpx.adobe.com/jp/photoshop/how-to/match-font-image.html
■被写体を選択→髪の毛を調整
被写体を選択だけでなく髪の毛を調整という便利機能がついたことも割と最近知りました。一瞬で人物切り抜きなど綺麗に出来ます。
https://photoshopvip.net/125355
■パターンプレビュー
自分でオリジナルパターン画像を作るときに便利です。
https://modelinghappy.com/archives/33735
見やすさについて／動きやアクションが面白いサイト
投稿者：本田
私はデザインのチェックをさせていただくときにやたらと余白や可読性のことを言うことが多いのですが、みやすさについてわかりやすくまとめているTweetがありましたので小ネタとして共有いたします。
https://twitter.com/pulpxstyle/status/1407151715493715969?s=20
あと遷移の動きやhover時のアクションが面白いおしゃれサイトも…。
https://www.placesion.com/
コーディング便利ツール（PerfectPixcel／Zeplin）
投稿者：芝山
私がここ1年で取り入れたコーディング便利ツールをご紹介します。
・PerfectPixel（Chrome拡張機能）
デザインと実際のCDのズレを確認するのに困っていたところご紹介頂いたツールです。
自分のCDしている画面の上にデザイン画像データを重ねることができます。
1pxのズレでもすぐわかるので、すごく重宝しております。
https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ja
・Zeplin（無料でも使えるアプリ）
Photoshopから文字をコピペするのに苦労している、と相談したところご紹介頂いたツールです。
Photoshopとの連携ができ、要素感の距離や使われているフォント、色などがすぐに分かり、テキストも簡単にコピペできる、私にとっては画期的なツールとなりました。
ただ、一部レイヤー効果で指定された色やフォントサイズがちゃんと拾えないらしく、あれ？となることがあるのでそのへんはご注意を…
https://haniwaman.com/zeplin/
黄金比計算・検証ツール
投稿者：西
配置のバランスを決めかねている時に役に立つ、黄金比計算・検証ツールについて。調べたものを共有します。
・CMSでMVに情報を配置するとき、ちょっとした部分なんだけど、迷って決めかねている
・なんだかしっくり来ない
・心地よいデザインだな、参考にしよう
など、初心に帰って比率を利用して調べてみるのも良いかもしれません。
https://yanohirota.com/ratio-calculator/
色々調べた中で一番みやすかったかな...
https://ratio.supercrowds.co/
↑使ったことないけど、こんなのもあるんですね〜freeだし試してみよう
https://stopwatchtimer.yokochou.com/ougonhi.html
こっちは画像を読み込んでそこへ黄金比のラインを重ねて検証できるツール。
仕組みは単純ですが、MVのスクショを撮り、大体の配置を考えてみるのに意外と使えます。
https://ocadweb.com/aspectratiotools
画像一覧のサムネイルの比率を考えるのに便利。
遅延読み込みを使いすぎるとパフォーマンスに悪影響を与える（loading="lazy"）
投稿者：斎藤
サイト表示高速化の救世主として登場した「loading="lazy"」ですが、
使用しすぎると逆効果になるという記事を見ました。
（私はめちゃめちゃ使用していました...）
実際にABテストを行った際の解説があり、
SEOに興味がある方には目からうろこの面白い記事では？と思い共有させていただきます。
https://coliss.com/articles/build-websites/operation/work/performance-effects-of-too-much-lazy-loading.html
斧を砥ぐことの価値
投稿者：土佐
今回はなるほどな〜と思った記事を共有させていただきます！もしお時間ある方は、見てみてください～
https://note.com/fladdict/n/n14d18afc14ed
オリンピックとデザイン
投稿者：川目
先日「オリンピックとはどんなものだ？」と思い、競技開催期間中に比較的会社から近い「日本武道館」に、昼休みがてら散歩へ。
最寄りの九段下駅構内は、オリンピック仕様にデコレーションされていました。で、武道館の方に歩いているとボランティアの方がいたので聞いてみると「関係者以外は入れない」との事。
そばまで行けるのかなと思っていましたが、テロやら何やら考えると「そりゃ近づけないか」と思い、トボトボ会社に戻りました。
で、オリンピックと言えば「五輪マーク」。五大陸を意味しているというのは皆さんご承知のとおりです。
それでいながら、輪をWORLD（世界）の頭文字の「Ｗ」になるよう配置された説や、古代ギリシャにある石碑に刻まれた柄が起源説など、有名な割に憶測を呼ぶような話があふれるのも、世界が注目するオリンピックならではと感じました。
※ちなみに色については「5つの自然現象」「スポーツの5大鉄則」を意味しているとの説もあるようです…どうでしょう？
パラリンピックもありますが、こうしたイベントを機に、そのロゴやデザインや建築等に興味を持つのも良い機会だと思いました。
gridについて
投稿者：尾髙
グリッドが便利だったので、もしまだ勉強してない方がいたら優先で勉強した方がいいかもと思い、私がグリッドを勉強したサイトを共有します。
①チートシートを印刷してとりあえず眺めてみる。
https://qiita.com/7dt/items/577ba8eada3380c93dbb
②Grid Gardenをやってみる。
このサイトは2月24日のWeb知識共有で土佐ちゃんが共有してくれたサイトなのですが、良いサイトだったので許可をもらって再掲させてもらいます。
ありがとうございます。
https://cssgridgarden.com/#ja
どうしてもわからない時の答えはこちら（英語です）。
https://programmingmentor.com/post/playing-css-grid-garden/
③解説サイトを読む。qiitaの記事がすごく良かったのでおすすめします。
https://coliss.com/articles/build-websites/operation/css/css-grid-cheat-sheets.html
https://qiita.com/kura07/items/e633b35e33e43240d363
https://qiita.com/kura07/items/486c19045aab8090d6d9
プログラミング言語ランキング（Python、PHP）について
投稿者：豆成
CMSをいじりながら、PHP勉強しようと思い、以前教わったプロゲートなるものを開いてみました。
ふと、「そういえば、今流行りのプログラミング言語ってなんだろう？」と思い、調査したところ……Python（パイソン）という文字が！
※ペッパーくん、インスタグラム、ユーチューブでも使用されているようです！
以下は、エンジニアが2021年に学びたいプログラミング言語一覧です！
堂々1位がPython！
そして、他サイトも見てみましたが、2位か3位に常に君臨しているのがJavaScriptでした！
https://codezine.jp/article/detail/13602
気になるのは……PHP。
20代エンジニアが学びたいと思っている言語を見てみると……
PHP、0.0％……。
これは一体、何を物語っているのでしょうか……。
※補足
Python、JavaScript、PHPをプロゲートでさわりだけ見てみると……
Pythonなんてシンプル！！と思ってしまいました。すんごく覚えやすいなという印象です！AI（機械学習・深層学習）に強いとのことで、今後ますます普及するのかなぁ……なんて思ってます。
よく見ているデザイン参考サイト
投稿者：河鰭
・現代デザイン
https://gendaidesign.com/
TOPだけじゃなく下層のデザインも載せてくれているサイト。
TOPが素敵！と思って下層を見てもｺﾚｼﾞｬﾅｲ…みたいな事がしばしばあったので、
1ページだけでも下層のスクショが載ってるとわかりやすくていいなと思いました。
・Parts.
https://partsdesign.net/
パーツ別のデザイン集です。
お問い合わせフォームやよくある質問のレイアウト、
メガメニューやMVのキャッチの配置に悩んだ時に見てます。
WEBサイトの変化について
投稿者：東江
今回は知識から若干ずれてしまいますが、ちょと息抜きにWEBサイトの変化について見るのも楽しいかと思い、下記のサイトをいくつかピックアップいたしました。
https://www.infocubic.co.jp/blog/archives/11526/
https://blog.hubspot.jp/look-back-20-years-website-design
また、いろいろと調べていたらHPが強烈だと有名だった「愛生会」という病院のサイトの記事を発見いたしました。現在は残念ながらリニューアルされているみたいなんですが、一度見て見てみたかったですね！
https://nlab.itmedia.co.jp/nl/articles/1508/31/news130.html