松下 絵梨

大阪のWeb/UIデザイナー・講師。CSS Nite in Osaka 実行委員長・Adobe XD ユーザーグループ大阪 主宰。『Adobe XDではじめるWebデザイン＆プロトタイピング 一歩先行く現場のスキル』（翔泳社）著者。Adobe XDとお酒が好きです。

松下 絵梨

大阪のWeb/UIデザイナー・講師。CSS Nite in Osaka 実行委員長・Adobe XD ユーザーグループ大阪 主宰。『Adobe XDではじめるWebデザイン＆プロトタイピング 一歩先行く現場のスキル』（翔泳社）著者。Adobe XDとお酒が好きです。

    SVG Tips vol.2 - SVGをウェブページに表示する方法

    前回の記事（SVG Tips vol.1）では、SVGの特徴とIllustratorから適切に書き出す方法について紹介しました。 今回は、書き出したSVGをウェブページに表示する方法について解説します。サンプルファイルも用意しているので、ぜひ一緒に手を動かしてみてください。 サンプルファイルのダウンロードSVGをウェブページに表示する方法SVGをウェブページに表示するには、大きく分けて4つの方法があります。 1.<img>タグ を使う  HTMLの<img>タグ でSV

    松下 絵梨

      • SVG Tips vol.1 - IllustratorからSVGを書き出す方法

        ウェブページでベクター形式のSVG画像を使うと、拡大しても画像が荒くならない、アニメーションできるなど、様々なメリットがあります。Illustratorからイラストやロゴを適切にSVG形式で書き出して、ウェブページに挿入する方法を、2回に分けてご紹介します。 アイコンやロゴをSVG形式で納品する際に困らないよう、普段ウェブに関わらないグラフィックデザイナーさんにも知っておいていただきたい内容です。 SVGとはSVGはScalable Vector Graphics の略で、

        松下 絵梨

        • すぐ使えるXD Tips vol.4 - テキストアニメーションをデザイン編

          Adobe XDの「自動アニメーション」を利用し、背景が透けて見える無限ループテキストアニメーションを作る方法を、動画で解説します。 使用している画像素材と完成形のXDファイルは、こちらからダウンロードできます。 ・background.jpg / 画像素材 ・text_animation.xd / 完成形のXDファイル 動画をご覧いただくのが分かりやすいと思いますが、下記に作業の流れを記載します。 テキストを入力する ①好きな文字を入力します。 テキストの設定は今

          松下 絵梨

          • ［サンプルファイルあり］Adobe XD ユーザーフェス特別企画・自動アニメーションハンズオン講座 当日用資料

            2020年9月26日（土）にオンラインで開催されるAdobe XD User Festival 2020の特別企画として行われるハンズオン講座の資料です。 アーカイブ動画当日の動画はこちらでご覧いただけます。 XDサンプルファイル ダウンロード ハンズオン講座で使用するサンプルファイルは下記からダウンロードしていただけます。 一緒に手を動かしながらAdobe XD User Festival 2020のロゴを動かして、あなただけのアニメーションロゴを作りましょう！

            松下 絵梨

            すぐ使えるXD Tips vol.3 - プラグインを使ってみよう編

            Adobe XDには、リピートグリッドやアセット、コンポーネントなど、Webデザインを便利にする機能がたくさん用意されていますが、動作の軽さを維持するために絶対に必要な機能しか入れない方針なのか、「こうだったらいいのに〜」「他のソフトだったらこれできるのに〜」と感じる場面が多々あります。 今回は、そういった“かゆい所”に手が届く、「プラグイン」の導入編として、インストールの方法と使い方について解説します。 サンプルファイルはこちらからダウンロードできます。 はじめに 素敵

            松下 絵梨

            すぐ使えるXD Tips vol.1 - ホバーのインタラクションをデザイン編

            Adobe XDの2019年11月の新機能「ホバーステート」を利用し、ボタンにマウスオーバー（ホバー）したときのマイクロインタラクションを作成する方法を解説します。 サンプルファイルはこちらからダウンロードできます。 完成系の確認まず今回の完成系を見てみましょう。 ホバーによって、下記の2つの変化が起こっているのがわかります。 ・角丸長方形の塗りが透明になる（不透明度が0になる） ・テキストの「文字の間隔」が広くなる Adobe XDでは、 「通常状態（マウスが乗っ

            松下 絵梨