WEB

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

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

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

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

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

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

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

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

日付入力フォームのカスタマイズでもう迷わない【IEにも対応】
投稿日:2019年9月25日

  「日付入力フォームを作ってほしい」 あなたはそう言われたら、どうやって実装しますか? HTML5になって追加された「input[type=date]」を使うでしょうか。それともプラグインを使うのでしょうか。 どちらにも一長一短があり、設置するサイトの目的に応じて柔軟 ...

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

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

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

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

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

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

【画像素材管理】エクスプローラーでタグ検索が…できた!
投稿日:2019年8月7日

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

【画像素材管理】画像素材を検索してヒットさせたい【タグ検索/無料/日本語】
投稿日:2019年8月6日

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

【社内デザイン】レスポンシブテーブルのデザインの作り方【Photoshop】【独学デザイナー必見】【WEBデザイン】
投稿日:2019年4月5日

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

超~かんたん!誰でもできる人物レタッチ【Photoshop】
投稿日:2018年7月17日

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

【画像大量保存&リネーム】ImageDownloaderとFlexibleRenamerの合わせ技【ページ量産案件に便利!】
投稿日:2018年5月23日

一時期、大型案件のページの量産ばかりしていました!需要がどれほどあるかわかりませんが、今回は画像が豊富なページの量産時にとっても便利だったツールをご紹介したいと思います。 ↑こんな時。 最初は自らをロボット化し大量に画像を保存する簡単なお仕事をしていたのですが、その際の量産対 ...

もっと簡単にアクセス解析したい!Googleアナリティクス「マイレポート」の使用方法
投稿日:2018年5月1日

Googleアナリティクスは無料で使用でき、アクセス解析機能も豊富なため、今やWEB制作には欠かせないツールになっています。弊社でもWEB制作を行うときは必ずと言ってよいほど、Googleアナリティクスの設定をさせていただきます。 ですが、便利がゆえに機能が豊富すぎ、初心者にはどこをどう見 ...

コスパ最強のプラン、はじまります。
投稿日:2017年12月27日

今回、東京の中小企業様限定で『コスパ最強のプラン』を新しく作りました。 このプランでは、Webサイト制作とそれに使用する写真素材の撮影も行うという内容でかなりコスパが良いものになっております。 BRISKでは「レスポンシブプラン」というものがあります。パソコン、スマートフォンに対応したレ ...

【コンバージョンアップ!】見積もりシミュレーションでお問合せアップ!
投稿日:2017年11月10日

ホームページのお問合せを獲得する方法として 最近では良いコンテンツを作るというのが重視されています。 コンテンツマーケティングという言葉が独り歩きをしSEO対策で 質の低いコンテンツやコピーコンテンツを量産した事で検索エンジンも質の低いコンテンツの精査を始めています。 BRISKでは ...

SVGを動かす [cssアニメーション/クリッピングマスク/波/線を描く]
投稿日:2017年6月12日

最近SVGを使用してコーディングすることが多くなりました。 SVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)、つまり伸縮自在のベクター情報で作られた画像のことです。 一つのSVGファイルで、どのサイズでも綺麗に表示させることができます。 ...

自社ホームページで、スピード評価「PageSpeed Insights」の点数を上げた話
投稿日:2017年3月27日

ウェブサイトの表示スピードを評価してくれるWebツールの一つに、PageSpeed Insightsというものがあります。 Googleが提供しているサービスですので、このツールでの評価はけっこう重要になってきます。 「PageSpeed Insights」での点数を何点以上にしてくださ ...

今どきのホームページで使われているCSSだけで作るかっこいいホバーアクション10個
投稿日:2016年12月15日

今どきのホームページでは、ホバーアクションがあるのが当たり前のように感じます。 また、1つ1つのホバーアクションが作り込まれていて、作りを見させてもらうと「なるほど!?」と思うような作りをしていて、参考にさせてもらっています。 そんな今どきのホームページに組み込まれているかっこいいホバーアク ...

デザインツールから、HTMLコーディングのスピードアップを考える [Photoshop] [Illustrator] [Creative Cloud Extract]
投稿日:2016年12月14日

最近Photoshopの「CSSをコピー」が結構使えるなということに気づき、他にも知らなかった便利な機能があるかもと調べていたところ、Adobeのびっくりサービスを発見。 「CSSの生成」と「スライス」について、コーディングがスピードアップしそうなデザインツールの機能をまとめました。 ※ ...