引き出しを増やしてスピードアップ！デザイントレースのやり方【初心者向け】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 新人デザイナーのぱんちゃんです。 入社して早5ヶ月、主にLIGブログのアイキャッチ制作を担当していますが、スピードもクオリティももっともっと上げていかねばならない今日この頃。 デザインがうまくなりたい……！！ もっとスピードをあげたい……！！！ そう思い、新年からデザイントレースをはじめてみました。 今回はデザインの勉強を始めたての方、私と同じく新人デザイナーの方に向けて、私がやっているトレースの方法と、実際やってみての気づきをお伝えできればと思います。あくまで一つのやり方として、参考にしていただけたら嬉しいです。 そもそもトレースってなに？ トレースとは「参考にしたいデザインをなぞって真似する」作業のことです。 とくにデザイン初学者の方にとってはトレースをするなかで細かい配色や、余白の取り方や文字の大きさなど、勉強になることがたくさんあります。デザインの引き出しが増え、いい
バナーの作り方ガイド！クリックしたくなるデザインの作成方法を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのぱんちゃんです。 社内制作デザイナーとして、LIGブログのアイキャッチやバナーの制作を担当しています。 今回は私が業務でも担当しているバナーの作り方についてご紹介します。先輩デザイナーに教えていただいたクリックしたくなる魅力的なバナーを作るための考え方や手順、参考サイトなども余すことなくお伝えしていくので、ぜひバナーを作る際の参考にしてみてください！ バナーとは バナーの目的 バナーとは、Web上にあるリンク付き画像のことを指します。主に広告・宣伝用として使われていて、他のWebページやサービスへのアクセスを誘導することが主な目的です。 バナーは、上部にキャッチーなコピーや写真、気になるワードを配置し、下部に帯やボタンをつけてクリック誘導する言葉をセットにしている構成が基本です。 広告は「嫌われもの」、一瞬で興味を持ってもらうことが大事 広告にはたくさん種類がありま
【2018年版】入力フォームのデザイン設計に参考にしたいサイト事例8選 | 株式会社パンタグラフ
弊社ブログではユーザビリティ向上のための入力フォームルール記事を、2回に分けてお伝えしていたのですが、今回は実際の事例を集めてみました。 デザイン面からもUI面からも、参考になるようなサイトを厳選して選定しており、既出の記事に合わせて、本内容も読んでいただくとより理想的なデザインの入力フォームがイメージつきやすいかと思います。 入力フォームの設計に携わるデザイナーさんたちには、ぜひ読んでいただきたい内容です。 ▼入力フォームについて考察した関連記事 ・入力フォームの制作ルールを紹介･解説 【ヒューリスティック分析】入力フォームを改善して送信数を上げる10の技 【スマートフォン編】入力フォームの送信数・CVRを上げる5つの改善策 ・入力フォームの参考サイトを紹介･解説 現役UIデザイナーが制作した入力フォームを自身で解説！【WEB屋必読】 判断基準：10のポイント こちらの10のポイントと照
UXデザイナーに学ぶ、ダークテーマをデザインする時に気をつけたい5つのポイント
iPhoneやAndroidでもダークテーマが採用され、ダークテーマが注目されています。サイトやアプリをダークテーマ対応にするには、単純に色合いを反転するだけではありません。読みやすく、バランスのとれた、快適なダークテーマをデザインする時に気をつけたいポイントを紹介します。 How to design delightful dark themes by Teresa Man 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ダークテーマをデザインするポイント1. 奥の面を暗くする ダークテーマをデザインするポイント2. 知覚コントラスト ダークテーマをデザインするポイント3. 明るい色の大きなブロック ダークテーマをデザインするポイント4. ブラックとホワイト ダークテーマをデザインするポイント5. カラーを濃くする 快
UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ
WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない
Webデザイン制作が変わる！便利な最新オンラインツール45個まとめ
この記事では、Webデザインやグラフィックデザインの制作スピードが爆速になる、便利な最新オンラインツールをまとめています。 うまくツールやサービスを利用することで、時間や労力の必要な作業もラクラクこなし、よりプロジェクトを円滑にすすめることができるでしょう。気に入ったツールを制作ワークフローに取り入れ、さらなる制作スピードアップを目指しましょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イラスト系ライブラリ 2. Web制作お役立ちツール 3. モックアップツール 4. デザインからコードへの変換ツール 5. プロトタイプツール 6. アイコン素材パック 7. デザインコレクション 8. 面白ツール Webデザイン制作が変わる！便利な最新オンラインツールまとめ イラスト系ライブラリ Fresh Folk スタイリッシュなイラストを作成で
CSSコピペでOK！カエレバ・ヨメレバ・トマレバのデザインをまとめてカスタマイズ！
このブログはわかったブログの運営者かん吉さんが開発したブログツール「カエレバ」「ヨメレバ」「トマレバ」を利用しています。 これらのツールは、商品・書籍・宿泊施設を紹介するのにとても便利で、多くのブログサイトで利用されています。 今まで僕はこの3つのデザインを個別にカスタマイズして使っていたのですが、それを今回統一させようと思いカスタマイズしました。 CSSをコピペして頂ければカスタマイズ完了のレスポンシブデザインですので、気に入った方はどうぞお試しください。 「バリューコマース」や「もしもアフィリエイト」を利用すると、様々なショップのボタンを表示させることが可能になります。設定がお済みでない方は、それぞれ以下のリンクから無料会員登録を済ませ、アフィリエイトコードを取得しましょう。 バリューコマース もしもアフィリエイト カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ 今回のカスタマイズ
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
楽天市場 スマホテクニック 簡単コピペだけでOK！カテゴリページ（商品一覧ページ）を改善！
1.下位カテゴリを強制表示＆表示カテゴリをコンパクト化 カテゴリを絞り込むボタンが見逃しやすくあまり機能していない 従来の下位カテゴリ表示の問題点 下位カテゴリは、「カテゴリページを絞り込む」ボタンをタップしないと、表示されない 「カテゴリページを絞り込む」のボタンは見逃しやすい位置にある（商品一覧の情報に目がいきやすい） 表示させた下位カテゴリも、表示領域が大きくページの全体を覆ってしまい、カテゴリ全体を確認しずらい 下位カテゴリを強制表示＆コンパクトに2列表示 「カテゴリページを絞り込む」をタップせず、下位カテゴリ強制表示 「カテゴリページを絞り込む」の部分をボタンではなく、タイトルバーに見える様にデザイン変更 表示させた下位カテゴリはコンパクトに2列表示 ※カテゴリ名が長い場合は、末尾に…で省略される仕様になっています。 変更方法 [css] ※楽天GOLDにCSSファイルを作成後、
フード関連ホームページのデザインのポイント2つ＆実例7選
「おいしそう」「食べてみたい」── そんな風に思わせる飲食店のホームページには、どのような点が共通しているのでしょうか。 飲食店のホームページの場合は特に、いかに視覚情報を活用してユーザーの感情を動かすことができるかどうかが鍵となります。 うまくいけば、実店舗への集客やオンラインショップでの購買につなげることができるでしょう。 今回は、フード関連ホームページのデザイン2つのポイントと実例をご紹介します。 思わずお腹が空いてくる、そんなホームページはどこで工夫しているのでしょうか。 実際に公開されているホームページの共通点を見て、ポイントをおさえてみましょう。 指をくわえていてもお客さんは来ない？ 画像引用元：pexels.com 飲食店も、お客さんを集客するためには、「行ってみたい」と思わせるホームページを開設する必要があります。 しかし、無数の飲食店が存在している中で、ただ単にホームペー
簡単にできる！人物写真をイラスト風にする方法｜dwango creators' blog（ドワンゴクリエイターズブログ）
みなさん初めまして！ ドワンゴ デザイナー1年生のトムです。 以前は営業でしたが、デザイナーになろうと思い、デザイン学校に通ってめでたく転身することができました。普段はイラスト制作やグラフィックなどのデザインを主に担当しています。 今回は営業さんでもできる人物写真をイラスト化する方法を伝えます。 営業資料の中で、イラストがあったら提案力も増しますね。 では早速スタートです。 素材を準備 ますば素材を用意。 今回はこの写真でやってみたいと思います。 できるだけ人物が大きく映っている写真を使うとイラスト化しやすいですよ。 人物の選択して、コピー まずは、人物を切り抜きます。ペンツールを使い人物の外周をトレースしていきます。この時、塗りは無し、線を2ptに設定しています。線の太さはお好で。 輪郭を一周してパスが完成したら、パスの選択ツールをクリックし範囲範囲を作成。 選択範囲ができたら写真レイヤ
2016年GoogleのWebフォント日本語版が(明朝3種・ゴシック3種・特殊2種)さらに追加！ | 【MsReDesign】スタバの新作・カスタマイズ記事・Wordpressネタなど
2016年GoogleのWebフォント日本語版が(明朝3種・ゴシック3種・特殊2種)さらに追加！ 2016-12-23 WEBデザイン WEBフォントはデザイン性で優れていたり、使っている機器にフォントが依存されないとメリットは多くあります。 ですが、今までWEBフォントは有料でしかもそれなりの金額が毎月かかっていました。 Googleで提供されていたものは１種類あり、デザイン性も優れていたのですがやはり１種類だけだったのでサイトのデザインによっては、使えなかったり… と、悩んでいたらGoogleFontがさらに、 明朝3種 ゴシック3種 特殊2種 増えるようです。 これはかなり嬉しい。 まだ開発段階ですが使用できるようなので、早速使いたい！という方は実装してみてください。 WEBフォントの使い方 WEBフォントの使い方はいたって簡単です。 head内にフォントを読み込むコードを入れる。
Photoshopで金屏風を作るチュートリアル -和素材作り-
今回はPhotoshopで金屏風を作ってみたいと思います。豪華で華やかな金屏風はお正月デザインに活躍しそうです。 Photoshopで金屏風を作る方法 photoshopを起動し、新規ドキュメント作成。サイズはお好みで構いません。[グラデーションツール]で全体を塗ります。 続いて新規レイヤーを作成し、全体に市松のパターンを配置します。 【市松パターンの作り方】正方形を四分割し、斜めに2マス塗りつぶします。今回は#e9b73cで塗りました。パターンの範囲（正方形）を選択した状態で、[編集]-[パターンの定義]を選択。任意のパターン名を付けて[OK] 作成したパターンで塗りつぶしたところ。市松レイヤーの描画モードを[乗算]にし、不透明度を50%に設定します。 更に新規レイヤーを作成。[フィルター]-[スケッチ]-[ノート用紙]を適用。プレビューを確認しながらお好みで数値を設定してください。描画
イラストレーターでスケッチ風ロゴデザインを作成する方法
をご説明します。 上の図のようにえんぴつで手書きで描いたようなロゴデザインです。ロゴのタイトルや見出し、タイポグラフィなんかに応用できそうですね。それではさっそく作り方をみていきましょう。
バナーレイアウト20選
効果が出るバナーのレイアウトには一定のパターンがあります。 今回は成果を出せるバナーのテンプレートを20種、広告代理店でバナーを作成している私が作ってみました。 バナーのレイアウトでお悩みの方も、そうでない方も、イメージを膨らませたり、いざという時のためにストックしたり、自由に活用して頂ければと思います。 【eBook】コンバージョンする効果の高いバナーの作成方法 悩んだらまずは最強のベーシック型コピー・訴求文・写真などをバランス良く盛り込み、情報量が多いレイアウト。バナーの時点で多くの情報を伝えられるため、飛び先との整合性が高いことが特徴です。しかし珍しさやインパクトにかけるので、似たようなバナーにまぎれると埋もれてしまう恐れがあります。 ベーシック型バナーレイアウトベーシック型バナーサンプル ベーシックに負けない３つの王道レイアウト同じバナーを出し続けているとユーザはマンネリを感じてし
デザイナーがバナー制作でお小遣い稼ぎをするための全知識 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ソウルドアウト株式会社のなごです。 Web制作で収入を得たい・増やしたい人にとって、バナー制作は空いた時間でサクッとできるのでおすすめです。 昨今は、クラウドソーシングによってバナー制作を外注する企業が増えてきているので、そこまで高度な技術がなくとも、5,000円～50,000円のスポット収入が得られます。 今回は、バナー制作によって、簡単にお小遣い稼ぎをするために必要な知識をすべてまとめました。社会人や学生、主婦の方など、空いた時間にお小遣い稼ぎをしたい人にも、Webデザイナーとして独り立ちするために実績を積みたい人にもおすすめです。 「成果が出る」バナーを作るには？ バナー広告の制作には、デザインスキルだけでなくWebマーケティングやコピーライティングのスキルも重要です。とくに副業や就転職を見据えてプロレベルのスキルを身に着けたい……という方は、Webの知識を総合的に学べる
Illustratorの線幅ツールでキャラクターの髪を描く | 鈴木メモ
このところ輪郭線の実験と合わせて線幅ツールにチャレンジしていました。 イラレで動きのある髪の毛を描くのに、線幅ツールをちょっとアレンジして使うと便利だったのでやり方をメモ。 ※cs5からの機能です。 イラレの線幅ツールで髪の毛を描く構造 上のビーナスさんをバラすとこんな感じになっています。 大きな面は髪色の塗りのパーツを作っていますが、細かな髪の束はそれぞれ一本の線のパスでできています。 作り方の前に：線幅ツールの大雑把な解説 ●線幅ツールとは パスに強弱を付けられる機能です。cs5からツールパネルに入っています。（強弱と言ってもペンタブ+筆圧とは仕組みが別なので、マウスだけで操作できます。） 詳しくはアドビさんのページへ。分りやすいです。 私はこれをパスを引いたら、後からそのつど操作して複数の強弱を付けるのは面倒そうだなあと思っていました。もちろんそれも便利なんですが。 ●使ってみた感
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
角が丸い立方体の作り方(イラストレーター)
http://nh-lab.com/illustrator-tegaki-font-tutorial/
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
