2021.09.22 WEBWebデザイン CSS mix-blend-modeを利用してブレンドモードをキレイに再現しよう コーディングを行うにあたってPSDやAIで作られたデザインをチェックしている際に、レイヤーに「乗算」や「スクリーン」が使われていて悩んだ経験がある方も多いのではないでしょうか。 今までCSSでコーディングするときには複数のレイヤーをまとめて画像で書き出したりとちょっとひと手間かける必要がありました [...]
2021.08.31 WEBWebデザイン 画像編集ソフト要らず！パワーポイントを使って簡単にバナーや画像ボタンを作る方法 ホームページに掲載したり、web広告に利用したりと、なにかと必要な機会の多いバナー。 ホームページの更新でちょっとしたバナーの文言変更や写真の差し替えがしたいとき、 制作会社に頼むのは面倒だし、費用がかさむ… でもIllustratorやPhotoshopなどの画像編集ソフトは持っていないし、持 [...]
2021.08.16 WEBWebデザイン 【Sass実践編】Sassの条件分岐と繰り返し処理とは？Sassでの制御構文の書き方を紹介！ 今回はSassの制御構文について解説していきます。 制御構文が使えるようになると、条件によってスタイルを振り分けたり、繰り返し指定するスタイルの記述を短縮できたりするので、理解しておきたい機能です。 INDEX制御構文とは@ifを使った条件分岐@forを使った繰り返し処理@whileを使った繰り [...]
2021.08.03 WEBWebデザイン SVGってなに？PhotoshopやIllustratorでSVG画像を書き出す方法を解説します。 JPGやGIFといった画像拡張子のほかに、「SVG」という拡張子を目にしたことがあると思います。 JPGやGIF等の「ビットマップデータ」とは違い、SVGは「ベクターデータ」に分類されます。ベクターデータには拡大しても画質が落ちないという特徴があり、昨今のwebサイトでは、レスポンシブやRetin [...]
2021.07.19 WEBWebデザイン CSS Grid Layoutを利用して2次元レイアウトを自由自在に操作する ひと昔前はCSSコーディングで段組みのようなレイアウトを実現するにはfloatやtable等を利用するのが主流でした。 CSS3が普及してからはFlexbox Layout（以下Flex Layout）を多用してきましたが、同じくCSS3から利用可能となったCSS Grid Layout（以下Gr [...]
2021.06.24 WEBWebデザイン 印刷すると⾊が変わる︖RGBとCMYKを理解して、正しくIllustratorの設定を使い分けよう（基礎編） 皆さんは、「印刷してみたら思っていた色より暗くなってしまった」「写真データを書き出したら色が変わってしまった」などの経験はございませんか。それらは恐らく、RGBとCMYKの違いによってもたらされるものが原因です。 今回は、RGBとCMYKそれぞれの特長と、Illustratorを使用する際に使い分 [...]
2021.06.17 WEBWebデザイン 【Sass実践編】Sassを使いこなす第一歩、「変数」の書き方と使い方！ 今回はSassの機能の一つ、「変数」ついて解説していきます。変数の記述はSassをより便利に使う上で確実に覚えておきたい機能なので、これを機にしっかり理解していきましょう。 Sassのコンパイルに関しては「Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説」を参照にし [...]
2021.06.04 WEBWebデザイン IllustratorデータをPhotoshopで開く！ レイヤーを保持したままaiをpsdに変換する方法 Illustratorでの制作物にPhotoshopで効果を付けたいときや、 aiデータをpsdデータに変換する必要があるとき、ただIllustrator上でpsdデータを「開く」をしても、レイヤーは統合されてしまいます。 今回はIllustratorで作成したデータのレイヤーを保持しながら、Ph [...]
2021.05.24 WEBWebデザイン CSS変数（カスタムプロパティ）を利用してコーディングを効率化しよう（入門編） 2015年にW3Cから勧告されて以来、CSSで変数（CSSカスタムプロパティ）が使えるようになってしばらく経ちました。 CSS Custom Properties for Cascading Variables Module Level 1 一部のレガシーブラウザ（主にIE11）が対応していなかっ [...]
2021.04.27 WEBWebデザイン Webサイト上での行動を操られている！? ユーザー心理に付け込む「ダークパターン」とは みなさんは通販サイトや情報配信サイトなどで、「買うつもりのない商品を購入してしまった・・・」「気づかないうちにメルマガを購読していた・・・」「解約の仕方がわからない・・・」といった経験はありませんか? もしかしたらユーザーを騙し、行動を操る「ダークパターン」の被害にあったのかもしれません。 本記事 [...]
2021.04.16 WEBWebデザイン 【Sass実践編】CSSの管理が楽になる「ネスト」を使ってみよう！書き方と利点を解説！ 前回の記事（Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説）では、SassをCSSにコンパイルする環境を構築しました。 今回はSassを使って効率的にCSSを記述していくうえで欠かせない機能、ネスト（入れ子）について解説していきます。 この機能を使うと記述をまとめ [...]
2021.03.03 WEBWebデザイン パスファインダーよりも手軽！Illustrator消しゴム・はさみ・ナイフツールの使い方 前回のブログで、パスファインダー機能を使って画像を分割したり、合体したりする方法をご紹介しました。 前回記事「オブジェクトを組み合わせて複雑な図形をつくる！Illustratorのパスファインダー機能をご紹介」 今回は、そんなパスファインダー機能を使わずとも図形を加工できる、消しゴムツール・は [...]
2021.02.17 WEBWebデザイン Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説 CSSをより効率的に記述する、Sass（サス）という言語ですが、Sass自体はブラウザで読み取ることができません。 今回はWindows10で、SassをCSSに変換（コンパイル）するための環境構築手順をご紹介します。 過去にDreamweaverでSassのコンパイルを取り扱った記事もありま [...]
2021.01.27 WEBWebデザイン 光って目立つ！Illustratorのアピアランス機能で「光る文字」を作ろう サイトのバナーやアイキャッチを作っていると、文字に光沢を持たせて重厚な感じを出したいときや、文字が光って浮かび上がるような表現をしたい、と思うことがあります。 以前、Illustratorのアピアランス機能を使って袋文字の作り方をご紹介しました。 YouTube動画のサムネイル作成に！Photos [...]
2021.01.21 WEBWebデザイン Adobe XDのプラグイン「Copy CSS to Clipboard」を使ってCSSコーディングを効率化 弊社ではwebデザインを作成する際にAdobe XD（以下XD）をメインに利用していますので、HTML・CSSコーディングを行う際にもXDを使うことになります。 XDで作成されたデザインカンプからコーディングに必要な情報を確認するにはプロパティインスペクタを利用することになりますが、手動、目視での [...]
2020.12.25 WEBWebデザイン オブジェクトを組み合わせて複雑な図形をつくる！Illustratorのパスファインダー機能をご紹介 今回は、Illustratorの機能の一つ「パスファインダー」機能についてご紹介します。 パスファインダーはオブジェクト同士の合体、分割、型抜きなどができ、知っておくと複雑な図形を簡単につくることができます。手作業でパスを使ってかたどることが難しい図形も、工夫すれば簡単に作ることができます。 I [...]
2020.12.16 WEBWebデザイン JavaScript不要！CSSだけでハンバーガーメニューを実装する方法 スマートフォンサイトでよく使われるメニューに三本線で表示されている「ハンバーガーメニュー」が挙げられます。 ハンバーガーメニューを実装するのはCSSとJavaScript、もしくはjQueryを使用することが多いですが、今回はもっと手軽にCSSのみで実装する方法を紹介いたします。 IND [...]
