デザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

Web制作では画像素材をいくつも使用してサービス内容を分かりやすくしたり、伝えたいイメージや印象をつくります。 そのため段々と購入した画像素材が増えていき、欲しい画像がどこにあったのかわからなくなって時間がかかることもしばしばです。 前回（【画像素材管理】画像素材を検索してヒットさせ ...

「仕事の内の〇割は探し物をしている時間だ」という話をWebデザインスクールの講師から聞いたことがあります。 年間あたり150時間、一日20分は探し物をしている時間だそうです。年間ともなると膨大な時間ですね。まさにちりも積もれば山となる。時は金なり。 参考：書類探しの時間１日に何分費やして ...

せっかく良質なコンテンツや優れたデザインがあるのに、ユーザーにとって「使いにくい」サイトになっていませんか？ サイトの使い勝手が良いかどうかはコンバージョンにも関わってくる重要なポイント。ディレクター・デザイナー・フロントエンドエンジニアのそれぞれが、ユーザーがどう利用するのかを予想しなが ...

以前「もう悩まない。CSSでレスポンシブなtableデザイン＆コーディング」でテーブルのhtmlコーディングについては記事をまとめさせていただきましたが、 今回は社内のデザインデータをあさってテーブルデザインのパターンを見てみたいと思います。 その前に3年くらい前のデザインデータからテー ...

2018.10.16にリリースされた IllustratorとPhotoshop CC 2019を早速使用してみて 便利だなと感じた８つの新機能をピックアップしてご紹介したいと思います。 （ほとんど職場でメインで使用しているPhotoshopの話になります） いろんなブロガーさんが ...

更新するコンテンツの画像が正方形・長方形以外の形のとき、どうコーディングしようか迷うことがありますね。 ただの円形なら CSS で丸める、背景が単色なら切り抜く部分を透明にした png や svg を画像の上に重ねるなどで対応できますが、どちらも難しい場合は SVG での切り抜きがおすすめ ...

もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることがで ...