デザイン

デザイン通りに近づけたい!文字に関する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日に何分費やして ...

【すぐに使える】ユーザビリティ&コンバージョン向上!効果の高いサイトにするためのUI・UX改善ポイント
投稿日:2019年8月5日

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

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

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

【Illustrator&Photoshop】CC 2019 アプリケーション登場 試してほしい8つの新機能!
投稿日:2018年11月2日

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

SVGで画像を切り抜く [クリッピングマスク] [IE含め全モダンブラウザに対応]
投稿日:2018年7月20日

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

もう悩まない。CSSでレスポンシブなtableデザイン&コーディング
投稿日:2018年7月17日

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

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

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

他社と差をつける名刺デザイン 【Part1】
投稿日:2018年6月8日

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

GIFアニメをつくってみよう~その2~作り方編[PhotoshopCC]
投稿日:2017年12月27日

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

SVGの書き出しかた + IllustratorからPhotoshopにシェイプをコピー
投稿日:2017年6月30日

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

GIFアニメーションをつくってみよう(サンプルPSDダウンロード)~その1~フレームアニメーションとビデオタイムライン[PhotoshopCC]
投稿日:2017年6月14日

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

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

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

イラストレーターでのさまざまなスライス方法まとめ[Illustrator]
投稿日:2017年3月31日

いきなりタイトルを裏切りますが、まずはaiファイルをPhotoshopで開くというのを試しましょう。 "ファイル" → "書き出し" → "書き出し形式" でpsdを選択して書き出しします。 書き出しオプションはWeb用(カラーモード:RGB / 解像度:スクリーン)に設定。 レイヤー ...

~2016~クリスマスのWebデザイン10選+おまけ[雪を降らせるjQuery]
投稿日:2016年12月20日

みなさんいよいよ2016年も年の瀬、いかがお過ごしでしょうか? 少し前にクリスマス関連のページ制作とバナー制作をしましたが、意外と参考が見つからなかったので今回探してみました。 クリスマスのWebサイトを作成する際にきっと役に立つおまけ付きでご紹介します。 Marunouchi Bri ...

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

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

未経験からwebデザイナーとして入社してみて~4ヶ月目~
投稿日:2016年8月30日

過去の記事→ 未経験からwebデザイン会社に入社してみて 未経験からwebデザイナーとして入社してみて~3ヶ月目~ 早くも4ヶ月目です。新たに知ったことや学んだことを書いていきます。 Photoshopに関して レイヤースタイルでオブジェクトにドロップシャドウを付け、角度を ...