最近WAFについて学ぶ機会があったので、今日はWAFについて少し書きたいと思います。 ちなみに私は今までWAFという単語はどっかで聞いたことあるけど何かはわからんな〜.. 程度の入門レベルです。 ちなみにWAFの話をする上で、「ファイアウォール」「IPS/ID...

サイト更新をした際に、SNSのOGP画像を変更したが…「新しいOGP画像変わらない！」と困った事はありますか？ 私も困った事があります。更新の時完璧な状態で、クライアント様にお渡ししたいですよね！ 【何故SNS関連はすぐにOGPの設定が変更されないのか】 ...

以前ブログで紹介した質感デザインの中のクレイモーフィズム。 難しそうな表現ですがillustrationの『3Dとマテリアル』機能を使用して簡単に作成できます。 【フォント選び】 この時なるべくイラストに近い太めのフォントを選ぶと立体感が出やすく可愛く仕...

【ChatGPTとは】 高度なAI技術によって、人間のように自然な会話ができるAIチャットサービスです。 例えば、質問応答、情報提供、アドバイスの提供、文書の要約など、様々なタスクに使用することができます。 以下にアクセスしアカウントさえ作ればすぐに...

WEBにmp4の動画を載せる場合、高画質なままだとページの読み込みに時間がかかり、ユーザーの離脱、SEO評価の低下などが想定され、あまりよくありません。 今回はmp4ファイルをAdobe Media Encoderで圧縮する方法をご紹介します。 ※Adobe Media Encoderは20...

お久しぶりの投稿になります。 ここ1~2年の間で読んだデザインの本で、現場でも役に立ちそうなおすすめの本を4冊、ご紹介します！ デザインの言語化　〈クライアントの要望にこたえる４つのステップ〉 https://www.amazon.co.jp/%E3%83%87%E3%82%B6%E3%82%...

2023年に流行るであろう質感デザインを紹介します！ [outline] デザイン表現の歴史 2008年頃までの主流はリアルな質感が特徴のスキューモーフィズムでしたが、様々なデバイスに対応するために再現性の追求、沢山の手間がかかることにより次第に衰退してい...

フォトショップで作成したイラストを拡大縮小した結果、ガビガビになってしまう・・・。そんな時はパス化してしまいましょう！ 【はじめに】 パス化するメリット画像を拡大縮小しても画質が乱れず使用しやすい、簡単に色の編集が可能になります。 【作成し...

良いフォントがあっても、太さが一種類しか用意されてなかったりする場合が結構あります。 そんな時に、イラレで簡単に太さを変更する方法をシェアします！ 【テキストをアウトライン化】 太さを変更したいテキストを用意して、まずはアウトライン化します...

サイトに画面を横切って流れていくアニメーションがあると、ダイナミックさを感じられて良いですよね！ 最近は大きい英字テキストが流れているデザインをよく見ますね 今回作成してみたので共有します！ 切り替わりがわかりやすいように色を分けているます...

何度も繰り返す単純作業はアクションを登録すれば、ワンクリックで実行できるので時短になります。 一回登録したらその後はいつでも使うことができるので、オススメの機能です！ 今回は単純な背景の切り抜きとトリミングをオートアクションに登録しました...

【HTML編】 dlの中にdivタグを入れられる HTML5.2からdlタグ直下にdivが入れられるようになりました。 dt、ddをまとめてきれいに見せることができます。 ※ulタグ直下はNGなのは変わらずです aタグの中にhrefを入れなくていい HTML5からaタグのhref属性が必...

Gitを使う上で、最低限知っておきたいGitコマンドを紹介します。 【git init】 「git init」はリポジトリを作成するためのコマンドです。 Gitを利用するためにはリポジトリを作成する必要があるので、まず実施するコマンドになります。 リポジトリを作成し...

CSS作成に当たって、簡単にCSSを作れるような便利なジェネレーターを紹介します。 [outline] 総合的なジェネレーター https://www.cssportal.com/css-generators.php ・角丸、シャドウ、ボタン、列、フリップスイッチ、グラデーション、ローダースクロール...

今回は制作時デザインの引き出しとして、cssで簡単に作成できるマテリアルデザインツールをまとめてみました。 【グラスモーフィズム】 グラスモーフィズムとはすりガラスを通して覗いたような背景のぼかしが特長のデザインです。 iPhoneやmacなどで主に使...

最近、下記のようなモバイル表示に特化したwebサイトをよく見かけます。 【参考】らんま1/2 | フェリシモ https://www.felissimo.co.jp/ranma/ 基本モバイルのデザインのみで、PCで表示してもモバイルのレイアウトがはめ込まれ、 余ったスペースはシンプル...

FVに写真を置いてる時読み込まれないと困りますね。 写真のサイズが大きいとどうしても読み込むのが遅くなってしまいます、、 どうにかして早く読み込ませる方法を確認しましょう！ 方法1.rel="preload"を使った画像の先行読み込み rel="preload" を使い、...

スライダーのドットはスライドが何枚あるかが分かり、見せたい側も見たい側も便利な要素です。 最近はただのドットではなく、サムネイルで内容が見られたり、あとどのくらいで切り替わるか分かったり、デザインも機能も多彩になったように思います。 今回...

[outline] まず最初に用意するもの ・Visual studio code（以下VSコード） ・Live server（VSコードのプラグイン） ・実機 Live serverとは？ VSコードのプラグインです。 拡張機能からインストールしておきましょう。 PCとSP、同じWi-Fiに接続する 必ず同...

画像の背景が足りない時、背景を簡単に伸ばす方法を紹介します。 【1.「コンテンツに応じる」で簡単に引き伸ばす】 切り抜きツールで拡大する時、上のコンテンツに応じるにチェックを入れたら、足りない部分を塗ってくれます! 特徴： 1.背景とコンテンツは...