デザイン

もうすぐオリンピック開催年の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で組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることがで ...

５分でできるレタッチ？！ Photoshopで誰でも簡単にできる人物写真のレタッチ方法をご紹介します。 参考として「美容系サイトのメインビジュアルで使用する人物写真」のレタッチを行っていきますが、採用サイトやLP制作など様々な場面で使えると思います。 レタッチ作業は時間がかかるとい ...

BRISKではお客様のご要望でWeb制作と一緒に名刺制作のご依頼を受けることがあります。 名刺制作の案件を担当する機会があったのと、前職での紙媒体の制作経験を活かして、今回は私なりの”ひと手間加えた名刺の作り方”についてご紹介します。 名刺をつくるまでの流れ 名刺制作のご依頼いただくと ...

ご無沙汰しています。作り方編まで大分間が空いてしまいました！ その1ではGIFの作り方についての概要を説明させてもらいましたが、今回はそれを踏まえたうえで実際の手順を詳しく説明していこうと思います。 Contents フレームアニメーションでのGIF作成 ビデオタイムラインでのG ...

SVGは拡縮可能なベクター画像です。 PhotoshopでもIllustratorでも、CCであればjpgやpngと同じようにアセット機能で書き出しができます。 上手くいかないあるある Photoshopから書き出しする時には、パス情報がきちんととれる状態か、というところが大事です。 ...

動きのついた広告やWebサイトは目を引きますよね。 GIFアニメはHTMLをサポートしている媒体なら再生ができる手軽なデータなのでWEB広告やサイトの要素でも使われているのを見かけます。言葉や静止画では伝わりづらいことも動画ならすぐに伝わるので説明にも便利なので、選択肢として作成スキルがあ ...