デザイン

静止画は動かせるのか!?動く写真シネマグラフ
投稿日:2020年3月4日

静止画の素材を動かしたい…動かしてほしい…そんな話を受けた人がいるのではないでしょうか?  今回は静止画を動かしたいというテーマで、静止画の一部だけ動かしたシネマグラフの紹介や 静止画を動かすため、Photoshopのタイムラインを駆使し、チャレンジしてみる内容など (比較的?)簡単に動か ...

今すぐコーディング爆速化!プロ仕様なChrome検証ツールの使い方
投稿日:2020年2月28日

軽くて拡張機能も豊富で、日本国内でも世界でもトップシェアを誇るブラウザ・それがGoogle Chrome。 Chromeの検証ツール(ディベロッパーツール)のお世話になっているサイト制作者は多いはずです。 この記事ではサイト制作のプロであるサイト制作会社の人でも意外と知らなかった知られざ ...

非デザイナーが無料デザインツール「Canva」で簡単にアイキャッチを作る方法
投稿日:2020年2月12日

ブログのアイキャッチ画像を作ろうとして、まずは構図を考えて、文字や画像を配置して、色を決めて、ジャンプ率を設定して、やっぱりここはこうして、いやこうでもない…なんて苦戦している間に数時間経っていた! ということはありませんか。デザインに正解はないので、試行錯誤しているうちにあっという間に午後 ...

【webデザイナー必見】raindrop.ioでブックマーク・参考デザインをすっきり整頓&管理!
投稿日:2020年2月6日

仕事中よく使うサイトや参考になるブログ記事は家で見返したいが、いちいち自分のスマホにURLを送るのは面倒! ブラウザのブックマーク機能は物足りない! 出来れば1つのサービスでブックマークを管理したい! 参考サイトをまとめたブックマークを共有したい! …というわがままな欲望を叶えてくれ ...

APNGでイラストやアイコンを動かそう!~AdobeAnimateの使い方~
投稿日:2020年2月6日

イラストや写真を動かして、Webサイトで見られるアニメーションといえばGIFアニメーションですよね。 ですが、近頃GIFアニメーションに代わる新しいAPNGという形式が現れました! 今回はこのAPNGについてと簡単にアニメーションを作成の過程をご紹介したいと思います。 【目次】 ...

【HTMLメール】デザインからコーディングまで!これだけはおさえておきたいポイント
投稿日:2020年2月5日

みなさん、HTMLメールを作成したことはありますか? テキストだけで作ったメールよりも凝ったレイアウトにすることができ、画像を使って華やかに見せることもできるので、よりユーザーの目を引くことができますよね。 華やかなメルマガなどが送られてくると、ついつい見てしまう方も多いのではないでしょ ...

webサイト制作でお役立ち! デザイン&コーディングをする時に便利なwebサイト6選
投稿日:2020年1月30日

入力するだけでパパっと数値や単語を変換してくれるwebサイトや、直感的に操作出来る色の見本webサイトなど、普段業務で使用しているデザインやコーディング時に便利なサイトを集めました。 デザイン編 3:2、黄金比等を一括計算「アスペクト比計算ツール」 見ているだけでも楽しい2 ...

【Adobe Fonts】Web制作会社側の個人アカウントでAdobe FontsのWebフォントを使ってよいのか
投稿日:2020年1月9日

Adobe Creative Cloud(以下 Adobe CC)に契約しているユーザーが利用可能なサービスに、Adobe Fonts(旧名 typekit)というものがあります。 追加料金なく、全フォントを商用・個人用問わず利用可能となっております。 Futuraなど有名な欧文フォ ...

デザインを綺麗に見せる余白!~デザインの基礎~
投稿日:2019年12月27日

今回は余白についてデザイン初心者さんや学生さん向けにご紹介したいと思います。 皆さんは余白とどう付き合っていますか? デザインするうえではかかせない存在の余白。なんとなく…といった感覚で使っていると違和感のあるデザインや 情報を正しく受けとってもらえないデザインになってしまいます。 ...

[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説
投稿日:2019年12月27日

Webデザイナーにとって、自分のデザインがコーディングしやすいのかどうかは意外と気になるもの。 コーダー側は受け取ったデザインを粛々とコーディングするだけなので、あまり「こうしてほしい」と声を上げることはありませんが、デザイナーの観点だけでは気付きにくい問題が埋もれてしまっているか ...

【AdobeXD】グループの上からでもアウトライン化(パスに変換)できるプラグインを作った話
投稿日:2019年12月26日

Webデザインといえば、今まで「Photoshop」「Illustrator」「Sketch」といった感じでしたが、昨今の「AdobeXD」の普及により、弊社でもXDで作成されたデザインを扱う機会が増えてきました。しかし、まだまだ発展途上のXDでは痒いところに手が届かない部分が多いのも事実で ...

【チーム作業のデザイナー向け!】PhotoshopでAdobe Creative Cloudライブラリを使いこなそう!
投稿日:2019年12月18日

皆さんはAdobe Creative Cloudライブラリ、通称『CCライブラリ』は活用していますか? AdobeCCを利用されている方、特にコンプリートプランなどであれば様々なソフトを自由に使う事が出来ます。 WEBデザイナーさんであれば、Adobe製品はPhotoshopやXD、Il ...

【最新版*2020年度にむけて】Webデザイン参考サイトまとめ【WEBサイト/レスポンシブ/LP/バナー】
投稿日:2019年11月5日

もうすぐオリンピック開催年の2020年!最新のWebデザイン参考サイトをサイト、レスポンシブ、ランディングページ、バナー別にまとめてみました。 参考サイト自体が最新デザインであったり、使いやすい・見やすいサイトを厳選しました。 これからのデザイントレンドをチェックするのに是非ご活用くださ ...

画面設計/ワイヤーフレームの作り方~Webディレクター必見~
投稿日:2019年10月28日

ワイヤーフレームとは別称「画面設計」と呼ばれるもので、Webサイト制作の工程の中で一番初めに作成されるものです。ビジュアル的には簡素ですが、非常に重要な工程です。 ワイヤーフレームを作成せずそのままデザインを起こしていく場合もありますが、その際もデザイナーの頭の中ではワイヤーの設計レベルの ...

ホームページリニューアルのすすめ【リニューアルの進め方/ポイント/手順】
投稿日:2019年10月10日

新しいデバイスの開発や通信の発達、急速なスマートフォンの普及で5年前に作ったサイトでも古く感じてしまうホームページ。今や会社の情報発信源、顔として必須のホームページも物理的な看板のようにリニューアルをする必要がありますよね。 「そろそろ自社のホームページをリニューアルしたいなぁ」と思った理 ...

【css】テキストにマスクをかけて途中から色を変える + 1文字ずつ動かすアニメーション [clip-path][mix-blend-mode]
投稿日:2019年10月4日

タイトルが上手くまとめられなかったのですが…そのままの内容です! 写真の上に被っているテキストだけ色が変わっているデザインのコーディングを依頼されたことがあって(最終的には別のデザインになりましたが)、もしアニメーション付けるならどうコーディングするかな?と考えた結果のサンプルです。 mix ...

【厳選10個】サイト制作の現場から厳選!すぐに活躍するchromeプラグインまとめ【全部無料】
投稿日:2019年10月2日

みなさんはブラウザのプラグインを使っていますか?YouTubeの広告をブロックしてくれるものや、YouTubeの再生速度を変えてくれるプラグインなどは便利ですよね。 今回はYouTubeのプラグインの話ではなく、「Webサイト制作で役に立つ」Google Chromeプラグインについてご紹 ...

デザイン通りに近づけたい!文字に関するCSSプロパティ総まとめ
投稿日:2019年8月22日

これひとつで印象がガラリと変わる、デザインの要(と言っても過言ではないかも?)。 それが文字ではないでしょうか。 特に日本語は漢字・ひらがな・カタカナ・アルファベットに数字と、いろいろな印象の文字が並んでいるので、デザイナーさんの苦労もわかるような気がします。 今回は、コーディ ...

脱初心者!駆け出しコーダーがつまづきがちなポイントを解説してみた【デザイナーも必見】
投稿日:2019年8月16日

突然ですが、あなたはコーダーですか?それともWebデザイナー? そして、あなたはどのくらいコーディングに自信があるでしょうか? え?「自分デザイナーなんでコーディングとか関係ないし!」という人、ちょっと待って! まだ「戻る」ボタンを押さないでください!! コーディングとデ ...

時短!Photoshopのアクション&ドロップレットで大量のPSDファイルを一括で処理しよう!
投稿日:2019年8月7日

WEB制作に限らず「複数のデータに一括で同じ効果を適用したい!」という場面があると思います。 Photoshopのドロップレットを使えば、アクションで作成した機能をドラッグ&ドロップのみで簡単に実行できます。 Contents 「アクション」と「ドロップレット」について ドロ ...