ログアウト

2021年6月のログ

WebPについて

投稿者:西
今更ながら名前しか知らず、実際には扱ったことがなかった画像フォーマット「WebP」について、
記事を漁ったので共有を(^_^)
・容量の小ささ
・透過できる
・その他アニメーションもOKだったり
装飾が多くてオリジナル度高めのヒーロー制作サイトでは、かなりありがたいですよね...!
でもやはり対応ブラウザの壁が...(IE、Safari未対応)(iOSはバージョンによる)
今後に期待...!
https://digitalidentity.co.jp/blog/creative/webp.html
https://afilove.com/webp/
https://www.lyzon.co.jp/blog/2020/20201209_webp-support-to-be-worked-on-today/

あしらいに着目したデザインレイアウトの本/イラレがよく落ちる場合の対処法

投稿者:堤
友達におススメしてもらった、今の自分にぴったりそうな本がありましたので紹介です。
まだ買っていないのでそろそろ買おうと思います!
-「あたらしい、あしらい。あしらいに着目したデザインレイアウトの本」
https://www.amazon.co.jp/dp/B08FSZDMF3/?coliid=I2YN20E3ASTFMQ&colid=34O3YZ46SV4RA&psc=0&ref_=lv_ov_lig_dp_it

もうひとつ、「イラレはコピペには強くない」という記事があり
最近頻繁にコピペ時の挙動があやしくなるので納得しました。
ドラッグ&ドロップを活用しようと思います!
-「イラレがよく落ちる」への処方箋
https://note.com/dtp_tranist/n/n525481afb2d0

Flexboxの使い方を基礎から学べるチュートリアル

投稿者:斎藤
CSSにFlexboxが登場してからよく使用させていただいておりますが、使い慣れたプロパティばかりを使用してしまい、結構力技であれやこれやと微調整することがありました。
ここでもう一度「Flexboxの種類や働き」をきちんと学習しようとしたときに参考になったサイトがございましたので、共有させていただきます。
https://coliss.com/articles/build-websites/operation/css/learn-flexbox-in-30-days.html
う~ん、便利ですが、やはり種類が豊富すぎますね。

iphoneのsafariの検索バーが下になる

投稿者:土佐
先日WWWDC21(Appleが開催する開発者向けカンファレンス)が開催され、色々な昨日が発表されました。
その発表で一つ、もしかしかしたら今後の制作に関係してきそうなものがありましたので、共有いたします!
iPhoneのSafariブラウザで検索バーが、画面下部に表示されるみたいです。
まだ実際どのような動きをするかわからないですが、画面下部に固定ボタン表示などは少し考える必要が出てきそうです。。。
その他もいろいろな機能が発表がされているのでもしよければ、お時間ある時に見てみてください〜。
https://engt.co/3g1XibE
https://www.itmedia.co.jp/mobile/articles/2106/08/news068.html
https://japanese.engadget.com/apple-wwdc21-214044400.html

おしゃれなアイキャッチの作り方

投稿者:川目
コーディング途中でちょっとした画像の制作(特に見出しやバナーのお願い)があるかと思います。
「苦手だけどデザイナーに戻すのもなんだし…」「急ぎって言われて、他の人にお願いしている時間が無い…」と色々思われている方もいるのではないでしょうか。
下記はアイキャッチの作り方という事ですが、バナーに通じるところがあるかなと思います。
また、バナー以外にそれこそブログやFBのアイキャッチを作ってほしいという話も出てくるかもしれません!あ、その時はデザイナーに話が行くのか?(笑)
という事で画像制作の参考程度であると思いますが、ご覧ください。
https://umuco.jp/eye-catching/

グラスモーフィズム(半透明ガラス)CSSエフェクト

投稿者:尾髙
最近気になってるグラスモーフィズムについてご紹介です。
グラスモーフィズムCSSエフェクトを手軽に作成できるオンラインツール。
完成したCSSコードをコピペできます。
https://markodenic.com/tools/glassmorphism-css-generator/
それから、2021年UIデザイントレンド「グラスモーフィズム」を表現するときの5つのヒント
https://designmemo.jp/2021/01/glassmorphism.html

Webサイトの予算と結果の関係性について

投稿者:豆成
■Webサイト制作の予算と成果に明確な相関、予算を抑えるほど“人気のない業者が短時間でやっつけるプロジェクト”化!
https://webtan.impress.co.jp/n/2021/05/31/40299

■発注者側の新規orリニューアルでの期待していた効果に、
①コンバージョン数の向上
②サイト訪問者の向上
③企業、サービスイメージの向上
④検索順位の向上
が上位になったそうです。

■そして、公開後に期待していた効果が得られたか聞いてみると……
①企業サービスイメージの向上
②検索順位の向上
この2つが顕著に、「変わらない、確認してない」となったそうです。

■そしてそして、さらに予算の話が、記事では続くのですが……
長くなってしまいますので、詳細は、記事をご覧くださいませ!

コアアルゴリズムアップデートについて

投稿者:東江
6月2日、コアアルゴリズムアップデートが実施されたそうです。ですが、今回は一部の準備が間に合わず、残りのアップデートは7月に実施される模様です。その中でも、2021年6月中旬からCore Web Vitalsが導入予定と発表されておりました。Core Web Vitalsはうちのサイトでも結構重要なものになってきそうですが、今回のアップデートでは正式なアナウンスはなかったようです。Core Web Vitalsが導入されるのは次回の7月になるのか、それ以降かはまだわからないですが、遅かれ早かれ導入はされるようなので、要チェックですね。

●コアアルゴリズムアップデート
https://service.plan-b.co.jp/blog/seo/32827/
https://digitalidentity.co.jp/blog/seo/algorithm/202106-google-update.html

●Core Web Vitals
https://service.plan-b.co.jp/blog/seo/25696/
https://mtame.jp/seo/corewebvitals/

コーディングスピードを上げるemmetについて

投稿者:河鰭
納期内でどれだけ手早くコーディングを終えられるか、毎日がタイムアタックの様相を呈していますが、皆様いかがお過ごしでしょうか。
爆速コーディングには欠かせない「emmet」、意外と使ってない記法がいっぱいあるな…と思ったのでチートシート(と使い方の記事)を紹介します。
https://docs.emmet.io/cheat-sheet/
https://qiita.com/Eki-in-san/items/790b7c2ba2bec1087aaa
自分はネストや要素の繰り返し、グループ化などはよく使ってたのですが、連番などはあまり使ってなかったなと改めて思いました。
CSSでもemmetは使えますが、使ってるエディターがある程度補間してくれるのもあってなかなか覚えられず今日に至っております。
全部が全部emmetで書く必要はないと思いますが、すぐ使えそうなとこだけ覚えておくだけでも変わるのかなと!
基本的な制作を早い段階で終えることができれば、
「アニメーションをつけようかな」とか、「ここもっとスマートにできるな」とか振り返る余裕も出てくると思うので、日々精進あるのみですね。

医療・健康に関したアイコンが揃っているサイト

投稿者:芝山・河鰭
医療・健康に関連したアイテムが揃ったアイコン素材。システムオリジナルとか使えそうです!
https://coliss.com/articles/freebies/open-source-icons-for-public-health-projects.html
https://healthicons.org/

cssで乗算やスクリーンができる/vs codeで連番を入れる拡張機能

投稿者:有元
■cssで乗算やスクリーンができる
https://logical-studio.com/develop/web/20200512-mix-blend-mode/
http://redline.hippy.jp/restart/css/post-145.php
今後どんどん使用していきたいと思います。
今のところ2案件で使用しましたが要素同士が親戚すぎると効かなかったりしたのでご注意くださいませ

■vs codeで連番を入れる拡張機能
ちまちまエクセルでやってたので…下記の連番を簡単に入れられる拡張機能入れました。
https://kekaku.addisteria.com/wp/20200714160757

デザインカンプの作り方とコツ

投稿者:芦田
デザインカンプの制作過程を他のデザイナーはどうやっているのかな?と思い、探してみたらちょっと面白いなと思った記事を見つけたので共有します。
https://koredake-design.com/design-comp-kotsu/

デザイン上で文字などを強調するコツ

投稿者:磯部
主に文字などを強調したい時なんかにデザインの参考になる内容の記事を紹介します。
記事はバナー向けと書いてありますが、他のどんな部分でも参考になると思います。

■初歩的な事から応用まで色々なコツが沢山まとめてあります。
https://desaken.com/archives/6977

■文字やレイアウトに一手間加えたいなと思うときに意識できる事がまとめてあります。
https://www.m-hand.co.jp/design/6612/