皆さま、こんにちは。
今週は近藤が担当します。
皆さんは、webサイトで例えば読みたい記事のリンクをクリックしようとした際に、レイアウトが突然移動して広告が表示され、読みたい記事をクリックする代わりに、広告をクリックした経験はありませんか？
私は何回かその経験がありますが、ページ上のその突然の動きは、『レイアウトシフト』と呼ばれます。
レイアウトシフトは、ページがロードされる際に画像のスペースが確保されず、画像が表示された際にその分レイアウトがずれてしまうことです。
対策は、コーディングの際、HTMLまたはCSSに必ず画像のサイズ指定をすることです。
ユーザーにとってフラストレーションを感じるだけでなく、SEO的にも低評価につながりやすいということなので、制作側としてはしっかり対応していきたいと思います。
皆様、こんにちは。
今週は近藤が担当します。
今回は、コーディングのためのコードストックをおすすめしたいと思います。
エディタに、よく使用するコードを登録しておくスニペット登録も便利ですが、ヘッダー・スワイパー・モーダル・・など、ある程度決まった型があるものは、コードストックにまとめて記載して管理すると、コピペ→サイトに合わせて少しカスタマイズするだけでよいので、時短になります。
私はNotionで管理していますが、表示形式をボードビューにすると、css,HTML,js・・など作成したカテゴリーごとにコードが表示され、一発で探せるのでとても便利です。
「コードストック」で検索すると、Notionでのまとめ方など詳しく説明してくれている記事もあるので、ぜひ調べてみてください。
皆さまこんにちは。
今週は近藤が担当します。
先日、Photoshopの新機能「生成拡張」を試してみました。
生成拡張機能とは、切り抜きツールなどで画像以上にカンバスを広げた際にできる余白を、自然に補完してくれる機能です。
上図は私が実際に試してみた際のBefore/Afterの画像です。
ほぼ違和感なく生成してくれることに驚きましたし、なにより操作が簡単なのがとてもいいと思いました。
サイズを広げ、「生成」をワンクリックするだけでできます。
テキストに「犬」「飛行機」などと表示させたい物の名称を入力することもできます。
画像の背景を違和感なく広げるという作業はしばしばありますが、意外と手間がかかることなので、今後はこの機能もうまく利用していきたいと思います。
皆さま、こんにちは。
今週は近藤が担当します。
PANTONE社（アメリカの色見本の企業です）から発表された来年のトレンドカラーは、Peach Fuzz（ピーチ ファズ）だそうです。
個人的にも大好きな色です。
優しさと共感のメッセージを伝える色として、この温かみのあるPeach Fuzzが選ばれたそうです。
近頃のニュースは暗いものばかりで、そういった世界情勢などもこういう色が選ばれた理由なのだろうかと思いました。
Web制作に使用する色としては、お客様の業種や方向性によると思いますが、「優しさと共感」という素晴らしいメッセージを持った色として、積極的に取り入れていくのもいいのではないかと思います。
皆様、こんにちは。
今週は近藤が担当します。
コーディングをする時、皆さんはジェネレーターを使っていますか？
先日、どんなジェネレーターがあるのか一度ちゃんと調べてみようと思い、検索してみたところ便利なジェネレーターがいろいろとあることを知りました。
以下、いくつかご紹介します。
・テーブル作成
・三角形作成
・flexbox作成
・シャドウ（影）作成
・グラデーション作成
・アニメーションのイージング（加速・減速）作成
テーブルやグラデーション、イージング作成のジェネレーターは私もよく使うのですが、直感的に操作でき、コードをそのままコピーできるので本当に便利です。
一口にグラデーションのジェネレーター、といっても、いくつかあるのでどれが使いやすいかぜひ見てみてください。
早く正確なコーディングのためにこれからもっと使いこなしていきたいと思います。
今週は近藤が担当します。
今回も便利ツールのご紹介です。
作業中、コピペを繰り返さないといけない時、いちいちブラウザを移動してその度に⌘＋c、⌘＋vをするのは面倒ですよね。
そういう時に便利なのが『Clipy』です。
clipyは、コピー履歴が残り、その履歴から選んでペーストできるアプリです。
ですので、違うページにある文を何回もコピーしなければいけない、一つ前にコピーしたものを貼り付けたい、などの時にとても便利なわけです。
さらに、スニペット登録もできるので、頻繁に使うコードやメールの定型文なども登録しておくと、一発で呼び出すことができます。
ちなみに、ClipyはMac用アプリなので、Windowsの場合は「Windowsクリップボード」が便利です。
「Clipy」で検索すると、インストール方法や使い方の記事が出てくるので、皆さんもぜひ使ってみてくださいね。
今週は近藤が担当します。
以前、「ChatGPT」と「Notion」をご紹介しましたが、この２つ、連携できることをご存知でしょうか？
Chromeの拡張機能、『ChatGPT to Notion』を使うことで、ChatGPTとの会話内容をワンクリックでNotionに追加できます。
準備もシンプルで、拡張機能を入れた後、Notionに受け入れ先となるデータベースを作成しておくだけでOKです。
実際、私は勉強中に出てきた疑問点やエラーの解決、コードの不明点などにChatGPTを使うことがありますが、それを簡単にNotionに記録していくことができ、後から似たような疑問やエラーが出てきた時にも履歴をすぐに見ることができるので、とても便利です。
ただChatGPTも時々間違えるので（有料版だと精度があがるようです）、鵜呑みにしないことが大事ですが・・。
皆さんもぜひこの拡張機能を使ってみてください。
今週は近藤が担当します。
皆さんは「Notion（ノーション）」というアプリをご存知でしょうか？
Notionとは、アメリカ発の多機能クラウドツールで、メモやタスク管理、ドキュメント管理やプロジェクト管理など、様々なツールを１つにまとめた「オールインワンワークスペース」などとも言われるアプリケーションです。
日本でも去年あたりから急速に広まり、規模や業界を問わず様々な企業で導入されているようです。
Notionが人気な理由をいくつかご紹介します。
【シンプルで使いやすい】
使いやすいデザインと機能が特徴で、誰でも直感的に操作ができます。
また、自由度も高く、ページごとにアイコンやヘッダーのカスタマイズも可能です。
【どんな端末でも使える】
スマートフォンやタブレット端末でも利用可能。デバイス間でデータを同期できます。
【低価格で使える】
４つの料金プランがありますが、個人で利用する場合は、無料プランでも十分です。
【使うアプリを減らせる】
今まで、メモ機能・Word・Excel・・とツールを複数使い分けていた場合も、Notionと連携できるので一元管理が可能。かつ、様々なツールの機能を兼ね備えているため、Notionだけに集約ができます。
実際に私も少し前から使い始めたのですが、【使うアプリを減らせる】ことと同時に大きな魅力だと感じたのが【データベースを簡単に作れてデータを一元管理できる】ことです。Notionの最大の魅力、という人もいます。
ワンクリックでデータベースが作れて、かつ、他のデータベースを参照することでデータの一元管理ができるんです。
私はNotionの多彩な機能をまだまだ使いこなせていませんが、例えば、自分がコーディング練習したページのリストに、それぞれの資料やメモを紐づけてまとめていったりしています。
情報が整理されると共に、後で見返す時もとても便利です！
Youtubeなどでもいろんな方が使い方を配信しているので、皆さんもぜひNotionを使ってみてください。
今週の担当は近藤です。
最近読んだ本をご紹介したいと思います。
Webやアプリで買い物をしたりサービスを利用する時、以下のような経験、ありますよね。
「勝手にメルマガに登録されていた」
「カウントダウンタイマーに焦って急いで購入した」
「入会は簡単だったけど退会方法が分かりにくい」
これらの、ユーザーを意図的にだますデザインは「ダークパターン」と呼ばれているそうです。
この本では、ダークパターンとは何かから、規制強化の実情、ダークパターンの具体例、企業やデザイナーがダークパターンに陥る背景と防止策、などが書かれています。
ダークパターンというものを初めて認識すると共に、今まで利用者として特に意識せずに画面を見ていたことを痛感しました。
「誰もがダークパターンを使ってしまう可能性がある」とも書かれており、これからは特に制作者側として意識しながらデザインを考えなければ、と思いました。
今週の担当は近藤です。
フォントの表記名にはいろんなアルファベットや数字がついていますが、それらに意味があることはご存知でしたか？
恥ずかしながら、私は最近この事実を知りました・・。
意味を知ることで、それがフォントを探す際の参考になるそうです。
例えば、”ユニバーサルデザインに配慮されているフォントを使用したい”場合、「UD」と書いてあるフォントかどうかが指標になりますし、解説文など様々な漢字を使用する時は、なるべく収録文字数が多い文字セットのフォントを選択した方がいいそうです。
表記の意味でフォントを絞り込めるとは思っていなかったので、やはり知らないことはよくないなと反省しました。
これをふまえて今後のフォント選びを行っていきたいと思います。
