デザインのアクセントになりそうな無料手書きフォントを集めました - バニデザノート

2011/10/21 1061 users 手書きフォント ライセンス よいフォント 各フォント バランス

デザインのアクセントになりそうな手書きフォントを集めてみました。 無料DL可能となっておりますが、 ライセンスなどは各フォントの詳細を御覧ください。 手書きフォント　アームド・レモン 無料手書きフォントの中ではバランスがよいフォントだと思います。 Sweetly Broken Halo Handletter Dear Joe 5 Casual Jellyka CuttyCupcakes Jelly... 続きを読む

バニデザノート - 最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ

2011/09/09 1014 users jQueryライブラリ jQuery ウェブデザイン 定番

ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 最近はもう定番になりつつあります。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非... 続きを読む

きっとトラブルが起きにくい！ウェブデザインの制作順序を書きました。 - バニデザノート

2012/02/14 737 users フェーズ ウェブデザイン ウェブサイト 構築 たくさん

ウェブサイトの制作には、いくつかのフェーズがあります。 企画→制作→構築→公開を何度もくりかえすこともあり、スパイラル方式なんて言われることもあります。 今回は、ウェブサイトの制作順序を書いてみたいと思います。 むかしはこういった文章をブログなどで書く方が多く、本もたくさんあったのですが 今は知識や技術に偏ったものがおおく、目に触れることが少なくなったのかもしれません。 もしくは、あたりまえのこと... 続きを読む

ワイヤーフレーム（モックアップ）を作るアプリがすごい進化してた |　バニデザノート

2015/04/07 560 users モックアップ ワイヤーフレーム プロジェクトフォルダ アプリ

ウェブサイトをデザインをするときに、ワイヤーフレームを作るのって 私にとっては「どこに何を置いて、どういう動きをするのか」というメモのようなもので。 手描きでレポート用紙に描いて、 スキャンしてプロジェクトフォルダへ入れておくことも多いのですが デザインの前に「こういう配置でいいですよね？」って共有したいとき 清書するアプリを時々探してしまうんですよね。まだしっくりくるものがなくて。 最近調べてす... 続きを読む

WordPressで「ささっと作る」で請けれなくなってる現状。 |　バニデザノート

2014/11/25 499 users ロリポップ WordPress アタック 現状 ハードル

WordPress案件、前からいろいろ請けさせてもらっているんですが だんだん「簡単にー」っていう範囲から外れてきていて どんどん予算もかさばっている現状があります。私なりの把握していることを書いてみます。 WordPressが広まりだした頃から、アタックを受けやすくなっているWordPress。 WordPressが動いて安くて便利なロリポップでのアクセス制限のハードルが高いです。 一時期特にロ... 続きを読む

バニデザノート - ホワイトスペース使ったウェブデザインの考え方

2011/09/13 357 users ウェブデザイン Box リズム ウェブサイト 要素

ウェブサイトの要素をレイアウトをする際に非常に重要な ホワイトスペースの考え方について、すこしまとめてみました。 私が人にウェブデザインを教えるときは、まずここから始めます。 boxとboxとの空間の開け方、要素と要素の「間」は、音楽でいうところの「リズム」だと考えています。 リズムが整っていれば、他の要素が主張したことが上手に伝わります。 リズムが整っていなければ、けんかしあい、不協和音＝見づら... 続きを読む

ウェブデザインの文章レイアウト組みパターンを展開してみる |　バニデザノート

2015/11/15 256 users ウェブデザイン バナー レイアウトパターン 配置 文章

ウェブデザインの中の、バナーやサイドメニューを抜いた、文章のレイアウトパターンを展開してみました。基本はだいたいこんな感じだとおもうので、配置に困ったら試してみてください。 続きを読む

Sketch3でこれからデザインする人に使い方のヒントになりそうな操作をまとめてみる |　バニデザノート

2015/07/19 189 users sketch3 ヒント 操作 使い方

1. [Insert]ボタン。なんでもカンバスに置くものの追加はだいたいここから入れられる。 2. オブジェクトを変形させたり、マスクしたりするボタン。 3. パスをブレンドする操作周りのボタン。 4. [View]ボタン。カンバス自体の設定や、ルーラーやグリッドなどの設定が入っています。 5. [Export]ボタン。書き出しはここか、10番から。 6. オブジェクトの配置や整列 7. 情報エリ... 続きを読む

商用も無料で利用できるフラットなフリーの日本向けソーシャルアイコンセット - GIGAZINE

2011/09/15 163 users ライセンス アイコン GIGAZINE http 全部

「フラットなボタンのライセンスフリーな日本向けソーシャルアイコンセットを作りましたので配布いたします」ということで、「バニデザノート」からアイコンがダウンロード可能となっています。 バニデザノート - フラットなフリーの日本向けソーシャルアイコンセットを作りました。 http://vanidesign.blog.fc2.com/blog-entry-7.html 中には全部で12種類のアイコンが以... 続きを読む

[配布]photoshopでドットのラインを描く方法＆破線（点線）ブラシ - バニデザノート

2011/11/21 153 users Photoshop 点線 プロパティー ドット ブラシ

photoshopでドットのラインを描く方法をまとめてみます。 さいごに、配布ブラシもあります。 Fireworksなら、線を描いて、プロパティーから「ストロークを編集」とすると きれいなドットラインが描けるのですが photoshopではそういった機能がないんですね。 ドットラインを描くにはどうしたらいいのか探してみたら、みなさん色々な方法で やってましたので、その方法をご紹介。 ブラシを使う（... 続きを読む

photoshopでのウェブデザインの勘どころ |　バニデザノート

2013/07/08 141 users ウェブデザイン Photoshop 一括 ツール ファイル

Photoshopで複数ページのカンプデザインを展開するとき、ファイルは一括にするのか、それとも１ページごとに作成するのか、その際共通オブジェクトをどう扱うかといったデータ・ファイル管理についてまとめてみました。また、Photoshopでのウェブデザインの際に便利そうなツールや「やり方」も合わせて考えてみました。 続きを読む

ウェブデザイン配置のちょっとした「もやもや」をスッキリさせる解決例。 |　バニデザノート

2014/04/05 135 users

ウェブデザインでの配置で、「ルール通りにやっているのにどこかうまくいかない」場合にどうやって解決していくかを考えてみました。今回の例題画像は、すべてクリックすると100%表示のデータを表示するようにしてあります。 ウェブデザインのちょっとした「もやもや」を、少しだけスッキリしたデザインにするヒントになれば嬉しいです。 続きを読む

フリーランスで仕事をしている際に使っているメモ・アラート・ユーティリティアプリいろいろ - バニデザノート

2011/11/11 115 users フリーランス ユーティリティアプリ メモアプリ iPad 仕事

フリーランスで仕事をしている際に使っている メモアプリなどをはじめとしたユーティリティアプリを まとめてみます。 主にmac,iphone,ipad,ウェブアプリになります。 クラウドっぽく使っているもの（すべてのデバイス共有） Evernote / アイデアメモとして。ipadの7notesなどで書かれたデータも最終的にはここへ。 Basecamp / プロジェクトごとのスケジュール管理。指示管... 続きを読む

これからウェブデザイナーになりたいと思っている人へのお手紙 - バニデザノート

2012/01/19 109 users ウェブデザイナー まえ Twitterアカウント ひと 本物

最近よくウェブデザイナーを目指しています！というプロフィールの twitterアカウントにフォローされることが多くなりました。 ウェブ系で働いている私としては、こうやって目指すひとが増えるのは とても嬉しいこと。 夢をみるだけでなく、会社に就職したり独立したりするまえに、 いまからできることを、書きだしてみました。 ●実際に働いているクリエイターさんのお話を聞く 本当はこれが一番早いんです。 本物... 続きを読む

フリーで使える！企業サイトでよく見かける、新しいウィンドウを示す「新窓」アイコン - バニデザノート

2011/11/24 101 users アイコン psd 新しいウィンドウ Fireworks PNG

フリーで使える、企業サイトでもよく見かける「新窓」アイコンをご紹介します。 Sheps4Freeさんでは、100のアイコンがDLできますよー！ お気に入りの新窓アイコンを、Fireworksの共有ライブラリに登録しておけば 効率化が図れそうですね♪ 100 External Link Icons (PNG, PSD) http://www.shapes4free.com/vector-icons/... 続きを読む

フラットデザインの参考になりそうなフリーアイコンやUI Kit、イラスト |　バニデザノート

2013/07/02 99 users フリーアイコン ディテール 手抜き UIキット クオリティ

フラットデザインを作成する際に参考になりそうなフリーアイコンやUIキット。「フラットデザイン＝手抜き」というのでは、クオリティが保てません。ディテールを確認し、フラットデザインの特徴を捉えていきましょう。 続きを読む

【レスポンシブ対応！】基本最低限、カスタマイズするだけの無料wordpressテンプレート「bee-responsive1.0」 - バニデザノート

2013/02/12 95 users レスポンシブ対応

【demo】動作サンプルはこちら 今回のこだわり viewport的なところで PC用：1024px < 2560px 小さなPCと７インチになるまでのタブレット端末（ipad大とか）：600px < 1024px ７インチタブレット端末（確認したのはnexus7だけ）：480px < 600px iphoneとかモバイル用：480px以内 に分けています。 また、PC用の場合だけ固定デザインとし... 続きを読む

.htaccessファイルや、ベーシック認証などを作成する「.htaccess Editor」 - バニデザノート

2011/11/06 95 users htaccessファイル htaccess Editor

ぽちぽちとクリックしていくだけで.htaccessファイルが作成できるので BASIC認証などが必要なときに便利です。 タイプミスも少なくてすみます。 機能としては ・ファイル一覧の拒否 ・ベーシック認証 ・エラーページの設定 ・デフォルトページの設定 ・URLでのWWWあり、なしの統一 ・リダイレクト先の設定 ・モバイルアクセスの制限 ができます。 設定していくと、下の方のフォームにテキストが出... 続きを読む

既存のhtmlを使ってWordPressテーマ化する時の必要最低限の手順 |　バニデザノート

2015/08/17 92 users HTML 既存 手順 最低限 wp-content

HTMLファイルのほうが多くを占めるサイトの場合、「既存のテーマファイルをカスタマイズするより、htmlファイルをベースに構築したほうが早いかも」、と思うことがあり、最低限どこを直していけばいいかを書いてみたいとおもいます。 テーマの基準となる.htmlファイルを /WPの置かれているフォルダ/wp-content/themes/new_theme 内にコピーします。ファイル名は、index.ph... 続きを読む

タグの閉じ忘れをチェックするブックマークレットが便利。 - バニデザノート

2011/12/04 92 users ブックマークレット ブックマ コーディング ワンクリック タグ

タグの閉じ忘れをチェックするブックマークレットを紹介します。 もう数年使わせてもらってます。 コーディングがほぼ終わった状態で、カラム落ちとか なにか表示がおかしいとき、divタグなどの閉じ忘れってよくあるのですが どのタグ周辺の閉じタグがないのかをワンクリックでチェックしてくれるものです。 使い方は簡単で、こちらのページのインストール項目の「タグ対応をチェック」というリンクをドラッグしてブックマ... 続きを読む

忙しい人のためのプロジェクト管理の考え方 - バニデザノート

2012/03/06 85 users プロジェクト管理 忙しい人 考え方

フリーランスで制作だけでごはんをたべているひとのほとんどは 少なくとも２〜３件、多い時は１０件以上の案件を 並行してプロジェクトをすすめているとおもいます。 新規ベンチャーな社長さんや、 ディレクションリーダーさんなんかもそうかもしれません。 今回は、どうやって複数のクライアント様との お仕事を滞りなくすすめていくのかということを考えてみたいと思います。 課題と希望： ・各クライアント様とのやりと... 続きを読む

ウェブ制作を依頼するお客様が「本当に欲しい」と思っている情報 - バニデザノート

2012/04/26 80 users ソース ウェブ 仕方 動かし方 制作

ここ最近、お客様からご要望をお伺いしているときも ウェブの制作を教えて欲しいと言われる時も よく出てくるのが 「どのサイトに本当のことが載っているのかわからない」 「（検索結果のブログで）ソースの一部だけが載っていて、実際の動かし方がわからない」 といった内容。 お客様もウェブを発注するために勉強しようとしている方が多く見受けられるのですが 勉強の仕方がわからない。検索しても、「ひとりごと」のよう... 続きを読む

バニデザノート - 色と人の感覚とウェブデザインのはなし

2011/09/16 78 users ウェブデザイン モニタ はなし 筆者 スペック

前回は空白のお話をしましたが、 今回は色のお話です。 空白・ホワイトスペースの扱いと、色の扱いはとてもよく似ています。 また、ホワイトスペースだけでなく、色も一緒にコーディネートすることで よりわかりやすくウェブデザインを行うことができるようになります。 空白・ホワイトスペースよりも、人間の「目」と、「モニタ」というスペックに関わる部分ですので あくまでも筆者の考え方として参考にしていただけると嬉... 続きを読む

グリッドシステムベースのデザインをするときに気をつけること |　バニデザノート

2014/07/08 69 users グリッドシステム フレームワーク コーディング デザイン 例外

グリッドシステムのフレームワークでデザインを作成する際、コーディングの時点で困らないデザイン方法です。 完全に順守すればほとんどカラム落ちやブラウザのことも考えずに作れると思います。 ただ、例外の部分もあって構わないと私は思っているので、あくまでも基本ということで、拡張は自由にやってください。 続きを読む

Wordpressの公式テンプレート階層チャートで命名規則をチェック |　バニデザノート

2013/02/26 65 users WordPress 命名規則 チェック

wordpressをCMSとして利用するとき、カスタム投稿タイプやカスタムタクソノミーを扱うことが増えてくると思います。各タクソノミーごとに表示を切り替えたい場合などに、Wordpress公式のテンプレート階層チャートを参照すると便利です。 →wordpress codex の「テーマの作成」のクエリベースのテンプレートを御覧ください。 この場合、category.phpとかindex.phpとか... 続きを読む