2024.06.26 WEBWebデザイン 【CSS】CSSで画像をクリッピング！clip-pathの使い方を解説！ コーディングに要求されるハードルが年々上がってきていますが、その一つにデザインの複雑化が挙げられます。 単純な四角形だけではなく斜め線や三角形、正円や角丸など、様々な図形を使用したデザインが、近年では見られるようになりました。 画像で書き出すと何かと融通の利かない図形ですが、CSSで切り抜いてしま [...]
2024.06.11 WEBWebデザイン 【Canvaの使い方】重なった素材を簡単に編集！レイヤー機能の使い方 Canvaは、豊富なテンプレートと直感的な操作で、誰でも簡単にバナーやチラシなどを作成できるデザインツールです。 2023年のアップデートで素材の「重なり順」を簡単に編集できるレイヤー機能が実装されました。 Canvaのレイヤー機能では、オーバーラップというレイヤーの絞り込みのような機能も追加され [...]
2024.06.04 WEBWebデザイン 【Photoshopシャドウシリーズ②】写真から被写体と影を残して背景のみを合成する方法 デザインをしているとき、商品写真などから、被写体を切り抜き、別の背景に合成したい！そんなことがたまにあります。 切り抜き画像に影を付けたい場合、被写体のみを選択して切り抜き、後から被写体に対してドロップシャドウをかける方法が一般的かと思います。 右のメガネにドロップシャドウをかけた画像も、悪くは [...]
2024.05.23 WEBWebデザイン 脱Sassへの第一歩！CSSでネスト機能（Nested Rules）を使う方法 CSSコーディングを行う際にプリプロセッサのSassを利用しているコーダーは多いと思いますが、Sassの基本機能の中でも特によく使われているのは「ネスト機能（Nested Rules）」ではないでしょうか。 普段Sassを使ってコーディングを行っていると、Sassが導入されていない作業を担当したと [...]
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の指定パターン 前回フレックスボックスについて紹介しましたが、今回はレイアウトにおける幅の指定に関するプロパティと、実際のコーディングで役立つ具体的な幅の指定方法をパターン別に紹介します。 フレックスボックスに関する過去の記事はこちらになります。併せて参考にしてみてください。 フレックスボックスに関する記事 [...]
