2022.01.20 WEBWebデザイン WebPへの変換をもっと簡単に、gulp-webpを使ってWebP画像を生成する方法 IE（Internet Explorer）11がサポート対象外になり画像の圧縮形式にWebPを利用する機会が増えました。 WebPについては当ブログの記事でも紹介していますのでそちらをご覧ください。 当ブログの「WebP」に関する記事 次世代画像フォーマット「WebP」に変換して、webサイト [...]
2021.10.08 WEBWebデザイン CSSのfilterプロパティを利用して簡単なフィルターを画像に追加しよう CSS3から新たに filter というプロパティが利用可能になりました。 今までは一部のレガシーブラウザ（主にIE11）でポリフィルが必要となるため導入を控えてきましたが、IE11をサポート対象外にする案件が増えてきましたので今後のために基本的な使い方をまとめておきたいと [...]
2021.09.22 WEBWebデザイン CSS mix-blend-modeを利用してブレンドモードをキレイに再現しよう コーディングを行うにあたってPSDやAIで作られたデザインをチェックしている際に、レイヤーに「乗算」や「スクリーン」が使われていて悩んだ経験がある方も多いのではないでしょうか。 今までCSSでコーディングするときには複数のレイヤーをまとめて画像で書き出したりとちょっとひと手間かける必要がありました [...]
2021.07.19 WEBWebデザイン CSS Grid Layoutを利用して2次元レイアウトを自由自在に操作する ひと昔前はCSSコーディングで段組みのようなレイアウトを実現するにはfloatやtable等を利用するのが主流でした。 CSS3が普及してからはFlexbox Layout（以下Flex Layout）を多用してきましたが、同じくCSS3から利用可能となったCSS Grid Layout（以下Gr [...]
2021.05.24 WEBWebデザイン CSS変数（カスタムプロパティ）を利用してコーディングを効率化しよう（入門編） 2015年にW3Cから勧告されて以来、CSSで変数（CSSカスタムプロパティ）が使えるようになってしばらく経ちました。 CSS Custom Properties for Cascading Variables Module Level 1 一部のレガシーブラウザ（主にIE11）が対応していなかっ [...]
2021.02.02 WEBWeb全般 Adobe XDのプラグイン開発を簡単に始めるツール「xdpm」試してみた 弊社ではデザイン・コーディングを行う際にAdobe XD（以下XD）を利用しています。 以前、XDのプラグインを自作する方法を紹介しましたが、今回はコマンドラインから簡単にプラグインの雛形を生成できるツール、「xdpm」をご紹介したいと思います。 AdobeXD/xdpm: A helper [...]
2021.01.21 WEBWebデザイン Adobe XDのプラグイン「Copy CSS to Clipboard」を使ってCSSコーディングを効率化 弊社ではwebデザインを作成する際にAdobe XD（以下XD）をメインに利用していますので、HTML・CSSコーディングを行う際にもXDを使うことになります。 XDで作成されたデザインカンプからコーディングに必要な情報を確認するにはプロパティインスペクタを利用することになりますが、手動、目視での [...]
2020.09.26 WEBWebデザイン ScrollTriggerを利用してwebサイトスクロール時にアニメーションを追加する（導入編） お客様のwebサイト制作を手伝わせていただくにあたり、スクロールに合わせてアニメーションを追加したいというご要望をいただくことが多くなりました。アニメーション自体はCSSの進歩により比較的簡単に実装できるようになりましたが、「スクロールに合わせて」という要件にはJavaScriptを併用する必 [...]
2020.09.14 WEBWeb全般 YouTube IFrame Player APIを利用してwebサイトに動画を埋め込む（導入編） お客様のwebサイト制作を手伝わせていただくにあたり、ページ内に動画を掲載したいというご要望をいただくことが多くなりました。動画の掲載方法は様々ですが、YouTubeの普及に伴い、同サービスが提供する埋め込みタグやAPIサービスを利用する形での対応が一般的となってきています。 そこで本記事では [...]
2020.07.21 WEBWebデザイン Adobe XDのコンポーネントを利用してホバーアクションをデザインする webデザインを作成する際についつい忘れがちになってしまうのがユーザーインタラクション時のデザイン（マウスホバーやボタンのクリックなど）です。 弊社ではPhotoshopでデザインをする際には別途レイヤーを作成したりPSDを分けて用意したりと仕様に応じて様々な工夫をしていますが、AdobeXD（以 [...]
2020.04.16 WEBWebデザイン Dreamweaver CCでSassを使ってCSSファイルをコンパイルする（CSSプリプロセッサー機能） 弊社ではHTMLやCSSのコーディングを行うスタッフの大半がDreamweaver CCを利用しています。コードスニペットやテンプレート機能、サイトの管理などweb制作に必要な機能が一通りそろっている高機能なエディタですが、Dreamweaver CCを利用してる理由の1つに「CSSプリプロセッサ [...]
2020.03.18 WEBWebデザイン 公式テンプレートを使ってAdobe XDのプラグインを自作してみよう ～starter project導入編～ 弊社ではwebデザイン作成前のプロトタイプを構築する際にAdobeXD（以下XD）を利用する機会が増えてきました。 XDは軽量・シンプルで使い勝手の良いツールなのですが、機能が限定的で痒い所に手が届かないこともしばしば。。。 そのような時に「何か良いプラグインはないかな」とインターネット等で検 [...]
2020.01.20 WEBWebデザイン AdobeXDのリピートグリッドを使ってコンテンツを一括で流し込む方法 前回、AdobeXDのリピートグリッドを利用したコンポーネントの作成方法を紹介しました。 前回の記事AdobeXDのリピートグリッドを使ってプロトタイプを効率よく作成しよう リピートグリッドを利用することでコンポーネントを繰り返すようなデザインを効果的に作成することができるようになりましたが、今 [...]
2019.11.20 WEBWebデザイン AdobeXDのリピートグリッドを使ってプロトタイプを効率よく作成しよう 弊社ではお客様にWebサイトのデザインを提案する際にレイアウト作成ツールとしてAdobeXDを利用しています。 AdobeXDは2017年に正式リリースされたばかりのまだまだ新しいアプリケーションですが、非常に活発に開発が進められており、毎月のようにアップデートが行われています。 Adobe B [...]
2019.09.27 WEBWebデザイン 【初心者向け】CSSだけで矢印をスタイルしてコーディングを効率化しよう HTML・CSSコーディングを行っていると、ナビゲーションやメニューに使われるテキスト部分がアンカーリンクであることが伝わるように、矢印アイコンの装飾が施されたデザインをよく目にします。 従来はgifやpngなどの形式で画像として書き出し、CSSの背景に指定してデザインを再現する手法が一般的で [...]
2019.06.21 WEBWebデザイン PerfectPixelを使ってデザインカンプとコーディングの確認時間を短縮しよう 筆者はコーダーとして日々コーディング業務を行っていますが、HTML・CSSコーディングを行う上で一番重要で手間のかかる作業はデザインカンプとコーディングデータを比較する確認作業だと考えています。 今回はこの確認作業を効率よく行うことができるChromeのアドオン「PerfectPixel」をご [...]
2018.01.26 WEBサイト構築・リニューアル Google Chromeのデベロッパーツールでスマホサイトの表示をチェックする方法 iPhoneやAndroidをはじめとするスマートフォンの普及に伴い、「レスポンシブデザイン」や「モバイルファースト」など、webサイトの制作においてもスマートフォンを意識した制作手法が当たり前の時代になり、私たちはPCだけでなくスマートフォンでの表示確認が欠かせなくなりました。 参考記事 We [...]
