Home > Archive of デザイン

デザイン

愛され♡「メリハリ」ウェブデザインを作る!注目を集めたいときのデザインテクニック




デザインの本質とはちょっと違うのですが、ウェブデザイナーに必要な技術のひとつ、広告などに使う「目立つ・理解されやすいウェブデザイン」の手法をまとめてみました。
メリハリをつけて、目に留めてもらえるようなデザインを目指しましょう!

(すみません、タイトルふざけました、中身はいつもどおりマジメです。)

Read More

photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。

psartboard_02.jpg

photoshopのアートボード機能を使えば、
sketchみたいにカンプを複数並べてデザインができます。
レスポンシブデザインはもちろんですが、PC/スマホサイトの各カンプをデザインしたり複数サイズのバナーパターンを同時に編集したりと結構使えたので、ご紹介。

※アートボード機能は、Adobe Photoshop CC 2015 から利用できます。

Read More

レスポンシブデザインのプレビューをするために、ブラウザの最小幅を知っておこう

all_20150910213948669.jpg

レスポンシブでぐりぐり動かしたいときに、ブラウザの最小幅って実はすごく大事で。最小幅がスマホ幅より広いと(というか、0 > スマホ最小幅 > ブラウザの最小幅になったとき)、納品前に二度手間になることも・・!
もちろん各幅をエミュレーターで確認するのも大事なのですが、中間の動きも見られるのがレスポンシブなのですよね。調べたところブラウザのバージョンによってサイズが前後してるみたいですので、現時点で私の環境で主要ブラウザの状況を調べました。

Read More

要素をタイル状に並べる軽量プラグイン「Freetile.js」

freetile.jpg

タイル状に要素を並べるので有名なのは、「Masonry」が有名ですが、もっと手軽に、軽くしたい!って時は Freetile.js がよさげです。

Read More

最低限これだけ覚えればemmetの恩恵にあずかれるかもな考え方のヒント

emmet.jpg

Emmet(旧 zen coding)を、できるだけ覚えずに入門するための、考え方を紹介します。
zen codingのときに私は一回挫折というか、面倒だなとおもって放置していた方で
なんで面倒と思ったかというと、速さに気を取られて一文で(何行ものHTMLを一発で=爆速を再現するため)長い呪文のような命令文をみて「あーだめだ」って思ったんですよね。

そのあたりも踏まえて、爆速にはならないかもしれないけど、短い文で面倒なコーディングを少しだけ楽にする基本を書いてみたいとおもいます。


Read More

軽量でシンプルなレスポンシブフレームワーク「Skeleton」

skeleton.jpg

Skeleton」は、レスポンシブCSSフレームワークです。「シンプルで、羽根のように軽い」がコンセプトで、基本的なhtmlコンポーネントと、グリッドレイアウトのみが入っています。
モバイルファーストな意識が高く、ファイル自身も少なく軽量なので全体が見渡しやすく扱いやすい印象です。

Read More

デザインで文化に切り込む、最近の斬新な神棚いろいろ。

01_20150714152352088.png

神棚って、なんか切り込みづらいトピックスなんですが。そんな切り込みづらいものにデザインプロダクトで切り込んでいる前衛的な方々がいらっしゃるようです。

今はパワースポット目的で神社を訪れてお札をもらって扱いに困っているひとや、厄除けのお参りでおみやげに持たせてもらうパターンで神棚に興味を持つ人もおおいとかそうでないとか・・。
ひとの暮らしに寄り添うという意味では、そういうモノに対してデザイナーが動くことは当たり前なのかも。そんな気軽な気持ちで紹介してみます。

※あくまで日本の「文化」としての「神棚」として扱っています。いろんな宗教とか考え方に触れる気はないです。

Read More

SVGデータから背景画像を作れる「Plain Pattern」・・のUIがかわいい。

svgpattern.jpg

SVGで作ったパターンをアップロードして、pngパターンでDLできるサービス「Plain Pattern」。

Read More

手描きの素材を自分でつくれるアプリ2個(フォント&ブラシ)

adobe_sketch.jpg

手描きの線や、文字を素材として落としこむ方法も、
手描き→スキャンや撮影の時代ではなくなっているようです。手書き系素材を自分で作るときに重宝しそうな2つのアプリをご紹介します。

Read More

photoshopの画面分割がとっても便利。

ps_bunkatu001.jpg

Photoshopでデザインを起こすとき、エディタみたいに分割できる機能を紹介します。
PC→スマホ用のページを起こすとき、ページを展開するとき、デザイントーンを比較・確認したいときに使えますよ。

Read More

Index of all entries

Home > デザイン Archive

Sponsored Link
【WebDesign】Photoshopでプロになる!オシャレ&クールなWebデザイン作成講座
▲Udemy講座第二弾!Photoshopデザインカンプ作成の流れをレクチャーします。クーポンコード【PS_BANIDESIGN】
はじめよう!Wordpressで作るおしゃれサイト【デザイン入門】
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、お得な価格で受講可能!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。10年以上に渡りオールラウンドウェブクリエイターとして活動した経験を活かして高品質なPhotoshopデータでの「デザインカンプ作成」のお仕事を主に行っています。業務提携いただける企業さま、ウェブディレクターさまを随時募集中です。Wordpress(ワードプレス)、レスポンシブ、スマホ用サイトもできます♪
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items