ボタンはユーザーがクリックしたりタップしたり、直接アクションを起こすためのWebサイトには欠かせない要素です。 ボタンにはホバーエフェクトとクリックアクションの2つの重要なアニメーションのタイミングがあり、それぞれ適切にデザインすることによって使いやすさの向上にも繋がります。 今回は、アニメーションが美しいCSSによるボタンデザインのサンプルコードをご紹介したいと思います。 ホバーエフェクト ビット調のホバーエフェクトアニメーション ホバーに合わせて楽しいビット調のアニメーションが現れます。 0 6つのボタンデザイン ユニークな6つのボタンのCSSアニメーションのサンプル。 0 矢印が現れるボタン カーソルを合わせると左側から矢印が登場するボタン。 0 テキストが変化するボタン カーソルを合わせると、ボタンのテキストがアニメーションを伴って変化します。 0 ポップで楽しいボタン カーソルを

インフォグラフィックとは インフォグラフィックス(infographics)とは情報を視覚的に表現したものです。 Information Graphicsの略語ですね。 データや知識を視覚的なデザインに落とし込むことで情報が瞬時にわかりやすく伝わるので、複雑な情報をわかりやすく伝える際に重宝されます。 インフォグラフィックと図解の違い インフォグラフィックと図解はほぼ同じものですが、明確に違いを分けるものはグラフィック要素があるかどうかです。 図解もインフォグラフィックの一種ですが、図解は情報を図としてまとめたもので視覚的なグラフィック要素が弱いのが特徴。 図解に以下のグラフィック要素を取り入れたものをインフォグラフィックと呼びます。 図解×グラフィック＝インフォグラフィック 図解にグラフィックが付与されていたとしても、シンプルなインフォグラフィックは図解に分類されることもあります。 しか

WEBデザインに重宝される！イラストのトレンド5選と描き方 公開日 : 2021.08.27 最終更新日 : 2022.10.05 デザイン デザイナーのリュウイチです。 唐突ですが私の描くイラストはキャラクターイラストが多いです。 得意なタッチは少々クセがあり、ご依頼内容に沿ったデザインコンセプトにマッチングする機会が少なく、提案するには使う場面が中々ありません。 (お気に召しましたら、仕事ください) ですが得意なタッチ以外のイラストも描けます！！ イラストを描くこと自体が好きなので、隙あらばイラストも織り込んだご提案させていただいております。 イラストを使用したWEBサイトを参考に交えながら、最近の流行を見て、最後に描き方をご紹介できればと思います。 イラストのトレンド5選アイソメトリック HELLO TOMORROW | NRIデータiテック TOYO HITEC｜RECRUIT20

デジタルマーケティングに携わる人なら避けては通れない「Web分析」。特にGoogleアナリティクスは基本中の基本といえるだろう。しかし、手軽に扱えるツールだけに、基本を知らないまま「なんとなく」扱い、誤った見方をしていた…ということも起こりがち。そこで、まずは分析初心者が読んでおくべき本、そして分析しながら迷った時のために初級者が手元においておくと便利な本などを、当サイトでもおなじみのWeb解析の達人、小川卓さんに選んでいただいた。 小川卓さんの歩いた距離をちょっとだけショートカット（？）できる本Web担当者Forumでも執筆や対談、セミナーなどでおなじみの小川卓さん。Webマーケティング関係で仕事をしている人なら、一度はその名前を聞いたことがあるだろう。小川さんが専門としているのは、Web解析。特にGoogleアナリティクスに関しては”達人”とも言われる存在だ。 そんな小川さんがデジタル

みなさんこんにちは！ デザイナーのえびちゃんです。 入社してからLIGブログのアイキャッチや背景ジャック、クライアントバナーなどのクリエイティブを担当させていただいておりました。 早いもので、入社して1年が経過したこともあり、上司のまこりーぬさんが、デジタルハリウッドSTUDIO by LIG（以下：デジLIG）における、ネット動画ディレクター専攻の下層LPを制作する機会を私に与えてくださりました……！ （作成したLPはこちら！↓） https://liginc.co.jp/studioueno/video_creator/ 私はデジLIGに通っていたので、卒業制作やポートフォリオに載せる作品としてWebサイトを作ったことはありました。ですが、デザイナーになってから仕事としてWebサイトを制作することや、LP形式のサイトを作ることは初めてだったので、たくさん悩みながら制作を進めていきました

この記事は、Twitterで連載していた「1枚の画像でフォントの特徴と使い方がわかる」に追加の情報を加えて記事にしたものです。 Webデザインを勉強されている方や、フォントの知識を深めたい方に最適な記事です。 ヒラギノ角ゴシック ヒラギノ角ゴシックは、日本語環境のMacに標準でインストールされているフォントです。 太さがW0（極細）からW9（極太）まで豊富に揃っているのが特徴で、癖がなく美しい書体なので、幅広くさまざまな用途で使いやすいと思います。 画像の右側は広告バナーなどで使用する場合を想定しています。 これらの画像は「スマートフォン時代のWebデザインスクール」をお手伝いいただいているUSAGI DESIGN emi.のemiさんにご協力いただき作成しました。 ヒラギノ明朝 こちらも日本語環境のMacに標準でインストールされているフォントです。 以前Apple Japanに問い合わせ

コーダーとして仕事をしていると、Webデザインデータをあらゆる形式で受け取ります。私はその中でもIllustrator（ai）形式でデータを受け取ってコーディングするのが苦手です。Illustrator 形式であってもとても快適にコーディングできる人もいるようですので、その場合は「なぜだろう」と思うでしょう。私が苦手だと感じる理由を書き出してみます。長年のしんどい思い出を辿りながら、心折れながら書いているので読みにくいと思います。 特に何かに役立つ情報ではありませんので、読んでみたい方だけお読みくださいね。 ※なお、印刷前提のデータとしてIllustratorファイルを受け取る（作る）のは、まったく苦痛ではありません。ロゴやイラストなど、Webサイト内で部分的に使用するベクタファイル素材の場合も同様です。あくまでWebデザインデータとしての話です。 CMYKIllustratorあるある第

◉しっぽり明朝は商用・同人誌利用可能の明朝体フリーフォントです しっぽり明朝は、石井中明朝体OKLやリュウミンKO、A1明朝、筑紫Aオールド明朝等に影響を与えた、東京築地活版製造所の名作書体である五号系活字を下敷きに、物静かで上品で、見ているだけでうっとりするような明朝体を目指して制作した、オールドスタイル明朝体フリーフォントです。 どんな方でも制限なく自由に使えるハイクオリティな本文用明朝体をお届けしたいと考え、こしらえました。フォントを単体で販売したりライセンスを変更する以外は商用でも個人利用でもおおよそ自由に使えるSILオープンフォントライセンスのフォントです。 ◉本文用Regularウエイトを含め全5ウエイトの“新しっぽり明朝” ヴァージョン3は“新しっぽり明朝”と謳ってもいいかもしれません。 それまで開発で使用していたフォント制作ソフトをFontforgeからGlyphsに変更し

余白とはなにもない空間という意味ですが、デザインにおいては意図を持ってデザインされたスペースのことを指します。 文字としての定義は曖昧ではありますが「空間をデザインする」という意味で使われる余白のことをホワイトスペースと言います。 英語ではWhitespaceやmarginなどと呼ばれますが下記のように使い分けられている事が多いですね。 Margin：情報を見やすくするために授けられた上下左右の余白 Whitespace：デザインを際立たせるためにデザインする余白 マージンは読みやすさ、ホワイトスペースは伝わりやすさに強く影響します。

Adobe FrescoとはAI機能搭載ブラシが使える無料のお絵かきアプリです。 ペイント系のアプリは多々ありますが、Frescoは他のアプリと違って人工知能が作成するリアルなブラシを使うことが可能。 Adobeの人工知能であるAdobeSenseiの技術が搭載されたペイントアプリはAdobeFrescoだけ！

滝井です。 はじめに、コロナ禍において医療や流通の現場など、在宅ワークなんてできようもない状況の中、社会に貢献していただいている方々には深く感謝申し上げたいと思います。 さて昨年に引き続き、2021年のネット広告に関連することを10個予測したいと思います。 未来を見据えながら機会（チャンス）は最大に、損失（ピンチ）は最小に、そしてどんな仕事でも常に変化はチャンスであることを意識していきましょう。 1.ネットのマス化によってネット広告は順調に成長する マスというのは「大衆」という意味ですが、情報は長い間、テレビ・新聞・交通広告などのマスメディアが牽引し、2000年くらいからその間にネットが参入してきました。 20年近い歳月を経て、2019年にテレビ CM の市場規模をネット広告が抜き、その差を広げたことからネットがマスメディアになりつつあると言えます。 参考：インターネット広告費が、6年連続

インターネットは便利だ。行きたい場所への道を教えてくれるし、近くにどんなお店があるかもわかる。支払いだってスマホ１つでできるし、遠く離れた友達の近況だって見られる。わからないことを検索バーに打ち込めば、答えのある大体のことがわかる。 インターネットは本当に便利だと思うし、この恩恵を捨てようなんてさらさら思わない。 ただ最近、この大体「なんでも調べられること」に疲れてきた気がする。 私は中学生から携帯電話をもちはじめ、高校生の頃にはスマホももっていた。家にパソコンもあり、デジタルネイティブとは言わなくても、そこそこデジタルに染まってきた年代だと思う。 学校の調べ学習でもインターネットを使うのは当たり前だったし、大学も会社も、インターネットがあることが前提で回っている。なんなら受ける大学はインターネットで調べて決めたし（遠方だったからオープンキャンパスには行かず、学部と偏差値で決めた）、就職活

こんな悩みを持っているあなたに後悔しないWebデザインスクールを選ぶポイントを紹介します。 厳選したおすすめのWebデザインスクールなのでどれを選んでも満足度は高いと思いますが、「講師の質を重視」「確実に転職できる環境」「質がよくコスパがいいスクール」それぞれ求めるものは異なりますよね。 この記事ではおすすめのWebデザインスクールの中からメリット・デメリットを詳しく解説し、それぞれの最大の魅力を簡潔にまとめていますので、あなたにぴったりなスクールがきっと見つかります。

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 初学者によくある共通点 Webデザインを学習中の方のレビュー（デザインのチェック）をしていて、いくつか共通のことがあることに気づいたのでまとめてみました。 フォントの種類を使いすぎてしまう最小フォントサイズは10pxフォントの規約についてワイヤーフレームがあるとデザインがワイヤーフレームに寄ってしまう余白はきちんとあるのに違和感があるドロップシャドウやぼかしが濃いめ写真素材の検索時のキーワードの

この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（14個） 2. パターンツール（7個） 3. イラスト系ツール（3個） 4. デザインツール（10個） 5. 配色カラーツール（6個） 6. グラデーションツール（3個） 7. SVGツール（8個） 8. スクリーンショ

まだPhotoshop使いはじめて間もない人だと「機能は知っていてもあまり使用していなかった…」っていう人も多いんじゃないでしょうか。 WebデザイナーにしろグラフィックデザイナーにしろPhotoshopを使うすべての人が覚えておくべき「非破壊編集」 なぜ必要なのか？具体的にどうやって使えば良いのか、詳しく解説していきます。

色の仕組みじゃなくて配色のコツが知りたいっていう人は『配色デザインのコツ7選　配色バランスとアイディアの出し方を徹底解説』をご覧ください。 まずはRGBとCMYKそれぞれの仕組みを解説し、その後具体的な違いを解説していきます。

本を出しました。「その仕事、全部やめてみよう」 このブログで書いてきたこと。 この20年間仕事で取り組んできたこと。 プログラマーとして、経営者として、感じたことや学んだこと。 誰かに伝えたら、その人や、あるいはその人のいる会社が、 もしかしたら何か変わっていくかもしれないこと。 「2020年版、書籍版・小野和俊のブログ」 のような形でまとめたらどんな風になるだろう。 そんな風に考えながらこの1年半ほど本を書いていました。 そしてようやく完成したのが今回の本です。 220ページの本になりました。 先日、とある日本の大企業の幹部の方からこんな相談を受けました。 「うちは事業会社ですが、手の内化・内製化が大事だということで、 今回初めて外部からベンチャー出身のエンジニアを採用してみたんです。 そしたらみんなが忙しい仕事中にも、業務時間外の夜中にも、 思いついたことを次々と好き勝手提案してくるん

休暇を楽しみながらテレワークで働く「ワーケーション」の普及を目指す政府の方針に対し、ＳＮＳなどで批判が出ていることについて、菅官房長官は、新型コロナウイルスの影響で打撃を受けた観光需要を喚起するうえで重要な施策だという認識を示しました。 これについて菅官房長官は午前の記者会見で「わが国にとって観光は地方創生の切り札だ。インバウンドが極めて難しい状況のため、まずは国内観光を楽しんでいただく環境を作っていくことが重要だ。政府としても普及に取り組んでいきたい」と述べました。 そのうえで「ホテルなどで仕事ができるようにＷｉ－Ｆｉの整備を支援するとか、休暇の分散化や取得促進に向けて環境整備が必要なので、観光庁などとしっかり連携しながら検討を進めていく」と述べました。