-
【Google Search Console】サイトマップを上げたのに検索結果に反映されない時に確認すること
サイトを制作した時や、ページを追加で制作した時、Googleの検索結果に表示させる時にはサイトマップをアップし、サーチコンソールにサイトマップ更新の内容を送信しますが、内容が一向に反映されないことがありました。その時の対処法について紹介します... -
便利な装飾ジェネレーター４選
HPの流れを飽きさせないように、セクションの間に斜めのラインや模様を入れると印象が一気にかわります。 複雑な図形もSVGを使って実装する事も可能ですが、CSSや簡単にSVGを生成して実装してしまいましょう！ SVG Shape Dividers Creator https://shapedi... -
あしらいやレイアウトCSSの便利ツール
【Flex layout Generator】 https://suiq.jp/flex-layout-generator/ 親要素の指定から子要素の余白指定まで、ジェネレーター上で細かく指定することができます。 レスポンシブ表示切り替えもあるのでflex-box使用時一気にレイアウトを組みことが可能にな... -
【Swiper】サムネ＋プログレスバー付き、スライダー実装！
実務で、メインビジュアルにサムネイルとプログレスバー付きスライダーを実装しましたので、 忘備録も兼ねて共有いたします！ demo http://mtrad-test.net/takemura/slider/index.html 【HTML】 <!DOCTYPE html> <html lang="ja"> &... -
【photoshop】ドロップレットで画像をwebpに変換する【効率化】
photoshopでwebp変換をひとつひとつするのは非効率的なのでアクション登録して、 さらに【ドロップレット】でアプリケーション化してしまい、効率UPしてみます！ アクションについて詳しくは以前の記事を参照ください 【Photoshop】自分でアクションを登録... -
【MW WP Form】選択内容によって送信先メールアドレスを変える
Wordpressのお問い合わせフォームプラグイン「MW WP Form」の送信先メールアドレスは、管理画面ではひとつしか設定することができません。 問い合わせ内容によって送信先を変えたいときに対応できるよう、選択内容によって送信先メールアドレスを変える方... -
【配色】おすすめの配色ジェネレーター2選
配色ツールはデザイン制作時に欠かせないツールですが、今回は最近便利だなと思った配色ツールを紹介します。 【】 COLORS こちらはグラフの配色を自動で生成してくれるツールです。 ※グラフそのものを生成してくれるのではなく、あくまでも配色ツールです... -
LINE配信の訴求力をあげる！【Flex message】
今回はLINE配信で便利な「Flex message」を紹介します！ 【Flex messageとは】 「Flex Message」とはLINE公式アカウントで送ることのできるメッセージの一つです。 HTMLに近い感覚で画像やボタンなどをレイアウトしてメッセージ配信できる機能です。配信内... -
【Photoshop】2023アップデート！より高度な削除・塗りつぶし
Photoshop2023 (V.24)がアップデートし、AIを使用したより高度な塗りつぶしが可能になったのでご紹介します 【基本操作】 単純な対象物・背景だとこのまま綺麗に塗りつぶすことが可能です 選択ツールで囲む 右クリックで「選択範囲を削除して塗りつぶし」 ... -
Lottieアニメーションを使ってみよう！
【Lottieとは】 JSONファイル形式のアニメーションライブラリです。 gifよりも小さいファイルサイズで、どんなデバイスでも動作するのが特徴。 扱いやすさや、After Effectsからの連動性など、とても優れたアニメーションライブラリで私もよく活用していま... -
【プラグイン】AddQuicktagで記事の作成を簡単に！
記事作成を簡単に装飾増やすプラグインの紹介します 【プラグインAddQuicktag】 投稿画面でタグを増やすプラグインです！ 投稿画面のボタン↓ 設定画面で入力 設定＞AddQuicktagで入力 cssで編集したい場合は開始タグにクラス名をつけます。また、反映させ... -
WordPressでWEBサイトを作ったときのページ表示速度対策
ページの表示速度はユーザーの離脱を防ぐためにも重要です。 今回は、最近やっているWordpressでWEBサイトを制作した際の表示速度対策を紹介します。 【1.imgタグにwidthとheightを記述する】 理由①：WP側で自動でloading="lazy"を追記してくれる 理由②：... -
WAFって何？WEBサイト制作で知っておきたいセキュリティ対策について
最近WAFについて学ぶ機会があったので、今日はWAFについて少し書きたいと思います。 ちなみに私は今までWAFという単語はどっかで聞いたことあるけど何かはわからんな〜.. 程度の入門レベルです。 ちなみにWAFの話をする上で、「ファイアウォール」「IPS/ID... -
【OGP】のOGPのSNSへの設定を即座に反映する！
サイト更新をした際に、SNSのOGP画像を変更したが…「新しいOGP画像変わらない！」と困った事はありますか？ 私も困った事があります。更新の時完璧な状態で、クライアント様にお渡ししたいですよね！ 【何故SNS関連はすぐにOGPの設定が変更されないのか】 ... -
【イラレ】ぷっくり3Dデザインを作ろう
以前ブログで紹介した質感デザインの中のクレイモーフィズム。 難しそうな表現ですがillustrationの『3Dとマテリアル』機能を使用して簡単に作成できます。 【フォント選び】 この時なるべくイラストに近い太めのフォントを選ぶと立体感が出やすく可愛く仕... -
ChatGPTはweb制作のプロセスに活用できるのか
【ChatGPTとは】 高度なAI技術によって、人間のように自然な会話ができるAIチャットサービスです。 例えば、質問応答、情報提供、アドバイスの提供、文書の要約など、様々なタスクに使用することができます。 以下にアクセスしアカウントさえ作ればすぐに... -
mp4のファイルサイズをWEB用に圧縮！【Media Encoder】
WEBにmp4の動画を載せる場合、高画質なままだとページの読み込みに時間がかかり、ユーザーの離脱、SEO評価の低下などが想定され、あまりよくありません。 今回はmp4ファイルをAdobe Media Encoderで圧縮する方法をご紹介します。 ※Adobe Media Encoderは20... -
【買ってよかった!】現場で役に立つデザイン本4選
お久しぶりの投稿になります。 ここ1~2年の間で読んだデザインの本で、現場でも役に立ちそうなおすすめの本を4冊、ご紹介します！ デザインの言語化 〈クライアントの要望にこたえる４つのステップ〉 https://www.amazon.co.jp/%E3%83%87%E3%82%B6%E3%82%... -
2023年に流行る!?質感デザイン
2023年に流行るであろう質感デザインを紹介します！ [outline] デザイン表現の歴史 2008年頃までの主流はリアルな質感が特徴のスキューモーフィズムでしたが、様々なデバイスに対応するために再現性の追求、沢山の手間がかかることにより次第に衰退してい... -
【photoshop】劣化しない！手書きイラストをパス化
フォトショップで作成したイラストを拡大縮小した結果、ガビガビになってしまう・・・。そんな時はパス化してしまいましょう！ 【はじめに】 パス化するメリット画像を拡大縮小しても画質が乱れず使用しやすい、簡単に色の編集が可能になります。 【作成し...
