2024.05.20 WEBWebデザイン 【Canvaの使い方】新機能「グラデーション機能」の使い方！色・向きの変更、応用まで徹底解説 Canvaは、豊富なテンプレートと直感的な操作で、誰でも簡単にバナーやチラシなどのデザインを作成できるツールです。 2023年のアップデートでグラデーション機能が実装され、より自由度の高いデザインが可能となりました。 この記事では、アップデートで追加されたグラデーション機能の使い方を解説します。 [...]
2024.05.02 WEBWebデザイン 【CSS】比較関数を使ってみよう！min()、max()、clamp()の使い方を解説！ CSSには様々な関数があります。transformプロパティで使用するtranslate()や、算術演算を行うcalc()などがなじみ深いかと思いますが、その中で複数の値を比較して値を計算する比較関数というものがあります。 今回はこの比較関数であるmin()、max()、clamp()の3つについ [...]
2024.05.02 WEBWebデザイン 【Photoshopシャドウシリーズ①】ドロップシャドウの使い方 「キレイに見せるコツも解説！」 Photoshopなどで文字や画像・オブジェクトに影を付けたいときによく使われる、ドロップシャドウ。 ドロップシャドウを使うと、下記のように、オブジェクトが浮き出ているように見せることができます。 一口にドロップシャドウといっても、効果のかけ方で印象がかなり変わります。 下のイメージ画像を見て [...]
2024.04.17 WEBWebデザイン 【Canva Pro】写真の不要な部分を一瞬で消去！Magic Eraser（消しゴムマジック）機能の使い方 前回の記事「Magic Designなど新機能が続々登場！Canva2023年アップデートで追加されたおすすめの新機能10選」で、2023年のCanvaの大型アップデートで追加された新機能をご紹介しました。 今回は、前回の記事の中でご紹介した「Magic Eraser（消しゴムマジック）」の使い方 [...]
2024.04.15 WEBWebデザイン 【Illustratorの生成AI機能】テキストからベクターデータを生成！イラスト・アイコン・パターンを素早く作る！ 先日、弊社ブログ記事「【新機能】Photoshopの生成AI機能「生成塗りつぶし・生成拡張」がすごすぎる！使い方をご紹介します。」を公開しましたが、Photoshopの「生成塗りつぶし・生成拡張」機能と同時期に、Adobe Fireflyを活用した生成AI機能が、Illustratorにも実装され [...]
2024.03.27 WEBWebデザイン 情報を視覚的に伝える！インフォグラフィックスの使い方・作り方 突然ですが、PDCAの4つのプロセスを表す上で、どちらが分かりやすいでしょうか？ テキストを羅列しているだけのAよりも、Bのほうが、4つあるプロセスが循環している、という情報が目に入りやすいかと思います。 このことから、情報伝達において、ビジュアルという要素は重要であることがわかります。 このよ [...]
2024.03.25 WEBWebデザイン Google Chromeのデベロッパーツールでリアルタイム修正をしよう（HTML・CSS編） web制作において、ブラウザでコーディングを確認、修正できるデベロッパーツールは欠かせない存在です。 デベロッパーツールとはブラウザに標準で搭載しているデバッグツールで、リアルタイムでのコード編集・確認や、コンソールエラーのチェック、スマーフォンなどの携帯端末の表示をチェックできたりとその機能は多 [...]
2024.03.21 WEBWebデザイン CSSでもifが使いたい！:has()擬似クラスを使ってCSSセレクタに条件分岐を書く方法 CSSでコーディングをしていると 〇〇のときだけ××したい □□のときは△△してほしい といった「条件」によって「分岐」を必要とするセレクタを書く機会がたくさんあると思います。 CSSはシンプルで柔軟な言語ですので、セレクタを工夫することで大体の条件を満たすことができるのですが、シンプルがゆ [...]
2024.03.12 WEBWebデザイン Magic Designなど新機能が続々登場！Canva2023年アップデートで追加されたおすすめの新機能10選 オンラインで使える無料のグラフィックデザインツールであるCanvaは、頻繁にアップデートが行われており、日々使いやすく進化しています。 そんなCanvaですが2023年に大型のアップデートが実施され、たくさんの新機能が登場しました。 この記事では、アップデートで追加された、おすすめの新機能10選を [...]
2024.02.27 WEBWebデザイン 【Figma】一気にクオリティが上がる！シェイプやテクスチャなどデザイン要素のおすすめプラグインを紹介 今回はFigmaのプラグインの中でもシェイプ、テクスチャ、その他のデザイン要素を作成するのに特に役立つプラグインを12個ご紹介します。 INDEXプラグインの導入方法シェイプと変形のプラグインBlobsTo PathWave&CurveSkewDatIsometricWarp Itテクス [...]
2024.01.26 WEBWebデザイン jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（Tickerモード編） jQueryプラグイン「bxSlider」シリーズの6作目となります。 jQueryプラグイン「bxSlider」シリーズ jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（導入編） jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズ [...]
2024.01.12 WEBWebデザイン 【Canvaの使い方】復元できて便利！データの削除・保存・復元方法 これまで多くのCanvaの機能を紹介してきましたが、今回はCanvaでデータを削除・保存・復元する方法をご紹介します。 Canvaで作成したデザインを削除した場合、削除してから30日以内であれば復元が可能です。 また、CanvaProを契約している場合は、編集履歴からデータを復元できます。 このよ [...]
2023.12.29 WEBWebデザイン 【CSS】max-width、min-widthの活用方法と実用的なwidthの指定パターン 前回フレックスボックスについて紹介しましたが、今回はレイアウトにおける幅の指定に関するプロパティと、実際のコーディングで役立つ具体的な幅の指定方法をパターン別に紹介します。 フレックスボックスに関する過去の記事はこちらになります。併せて参考にしてみてください。 フレックスボックスに関する記事 [...]
2023.12.27 WEBWebデザイン 【新機能】Photoshopの生成AI機能「生成塗りつぶし・生成拡張」がすごすぎる！使い方をご紹介します。 写真を使ってデザインをしているとき、「もう少し背景のエリアを広げたい…」「被写体が近すぎる…もう少し引きの画が欲しい」などと思ったことはありませんか？ 背景を無理やり引き延ばしたり、複製した写真をずらしたりしてみてもなにか不自然になってしまいますよね。 また、写真の中に映りこんだ物を消したいこと [...]
2023.12.26 WEBWebデザイン 【Figma】簡単にイラストが作成できる！絶対使うべきイラストプラグイン・モジュール8選 前回はFigmaのプラグインの導入方法についてご説明しました。 今回はFigmaのプラグインの中でもイラストに特化したプラグイン・モジュールを8個ご紹介します。 直感的でわかりやすい操作で時間をかけずにイラストを作れたり、オリジナルのイラストを追加できるので、イラストを描くのが少し苦手だなと思う方 [...]
2023.12.26 WEBWebデザイン パワーポイントでバナーを作るための実用的テクニック4選！パワポでもここまでできる！ 先日、弊社ブログ記事「＜ノンデザイナー・初心者向け＞デザインツールがなくてもOK！パワポでバナーを作るために押さえておきたい6ステップ」が公開されました。 その際、「この表現は、パワーポイントではどうやっているの？」という声が寄せられたため、今回具体的なテクニックとしてご紹介したいと思います。 パ [...]
2023.12.06 WEBWebデザイン ＜ノンデザイナー・初心者向け＞デザインツールがなくてもOK！パワポでバナーを作るために押さえておきたい6ステップ Webサイトを更新したりWeb広告を出稿したりするときに、たくさんのバナー画像の制作が必要になることがあります。 このバナー制作について、「自分で作りたいけど映えるバナーが上手く作れない」「制作会社にお願いしたが、イメージを上手く伝えられない」などとお困りの方はいらっしゃいませんか。 今回は、ノン [...]
