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

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

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

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

2015/10/30 39 users ウェブデザイン ウェブデザイナー メリハリ 本質 手法

デザインの本質とはちょっと違うのですが、ウェブデザイナーに必要な技術のひとつ、広告などに使う「目立つ・理解されやすいウェブデザイン」の手法をまとめてみました。 メリハリをつけて、目に留めてもらえるようなデザインを目指しましょう！ （すみません、タイトルふざけました、中身はいつもどおりマジメです。） ウェブサイトは、横幅1200px〜（メイン記事サイズ940px 〜 980px）、で作るので、かなり... 続きを読む

ちゃんとしたサイトがGoogleさんで正しく検索してもらえるようなSEO対策 |　バニデザノート

2015/09/25 48 users SEO対策 Googleさん

これさえ守っていれば大丈夫。キーワードを散りばめるのも重要ですが、キーワードを意識しすぎてキーワード中心に「キーワード10回必ず入れる！」みたいな文章は上位に来た時に結局人間が見てつまらないので成果がでにくい。 キーワードキーワード言わずに、そのサイトのテーマに沿って必要な文章を書いていれば大丈夫です。意識しないくらいがちょうどいいと思います。 ページ数を増やすのも一緒です。「SEOのためにとりあ... 続きを読む

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

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

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

軽量でシンプルなレスポンシブフレームワーク「Skeleton」 |　バニデザノート

2015/07/27 62 users Skeleton グリッドシステム グリッドレイアウト 横幅

「Skeleton」は、レスポンシブCSSフレームワークです。「シンプルで、羽根のように軽い」がコンセプトで、基本的なhtmlコンポーネントと、グリッドレイアウトのみが入っています。 モバイルファーストな意識が高く、ファイル自身も少なく軽量なので全体が見渡しやすく扱いやすい印象です。 960gsベースの、グリッドシステムです。HDなPCサイズでのみ横幅を広げるなど、イレギュラーなこともCSSをいじ... 続きを読む

スクロールしたらふわっと画像が表示されるjQueryプラグイン「Lazy Load」 |　バニデザノート

2015/07/23 24 users Lazy Load jQueryプラグイン フェードイン

最近またよく見かけるようになってきた動きのひとつなので、ご紹介します。 スクロールしたら、画像を読み込むようにすることで、上手にコーディングすればロード時間も短縮できるかもなプラグインです。 画像がフェードインアニメーションするのを見ているだけでも、なんとなく「手が掛かっているように見える」という効果もあるかもです。 続きを読む

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

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

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

自分色にハックする21世紀エディタ「Atom」 |　バニデザノート

2015/07/04 32 users Atom Espresso CODA GUI 自分色

Atomは、Github製エディタです。私のコーディングの主力エディタは、mi→Espresso→Codaと移ってきて、この数年はずっとCodaだったんですが、Sublime Textの人気っぷりが気になって、使ってみて（残念ながら恋に落ちなくて）スルーしてAtomを使ってみています。 今のところフリーソフトなので、敷居も低くて素敵ですね。 エディタもいろいろありまして。GUIでボタンをつくってマ... 続きを読む

おしゃれ系女子が持ってるマイボトルに描かれていそうな手描き風フォントを紹介してくれているサイトをいくつか。 |　バニデザノート

2015/06/24 38 users マイボトル フォント フォント自体 パーティ ベビー

タイトル長くてすみません。なんていうか、いま流行りのマイボトルに手描きで「MY BOTTLE」って描いてあるあのフォントを探していて、そこから派生して見つけたかわいい手描きフォントたちをご紹介します。 ナチュラル系から、かわいい系、（甘くすれば）ベビー、パーティのカードなんかに使えそうですね。 フォント自体から想像しづらい、使っている文字列や、演出がかわいいっていうのもあるので、紹介してるサイト記... 続きを読む

「デザイン」という思考（概念）をまとめてみる。 |　バニデザノート

2015/04/18 50 users わたし 説明 １５年間 概念 思考

デザインとはなにか。という問に対しては 説明がとてもむずかしい。 だから、概念的になってしまって、ぼんやりして申し訳ないですが わたしが15年間くらい、いろいろみてきて、いま思う「デザイン」についての触りを、まとめてみました。 続きを読む

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

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

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

Ameba ownd でできること、できそうなことをまとめてみました。 |　バニデザノート

2015/03/22 12 users Ameba Ownd

コンセプトページのムービーをご覧いただくとわかるかと思いますが SNSやら人の目やらを気にして、どうにも動きづらくなった時代に、自由に表現できる場所を。というようなことを受け取りました。 owndにもSNS連携や、アメブロ連携などがありますので、どこまでそれが可能なのか、というのは多分運営側に任されている感じですが、想いはすごく伝わってきました。 続きを読む

Re:WordPressで「ささっと作る」で請けれなくなってる現状。 | たけのおしごと

2014/11/26 55 users たけ エントリ フリーランス take_it 現状

フリーランスのwebデザイナー・webディレクター、たけ（@take_it02）のブログ。フリーランス生活や、web制作におけるコミュニケーションの話なんかを。 いえーい、バニさんおひさー。げんきー？ WordPressで「ささっと作る」で請けれなくなってる現状。 |　バニデザノート 面白そうなエントリが話題になってたので、いっちょ噛みしてみるよー。 >WordPressで「ささっと作る」 「ささ... 続きを読む

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

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

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

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

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

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

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

2014/04/05 135 users

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

2014年の１月時点でのウェブトレンドをおさらい。 |　バニデザノート

2014/01/31 48 users デバイス インパクト 工夫 おさらい ソースコード

2014年の１月時点でのウェブトレンドをおさらいします。豊富な表現と、ソースコードはシンプルに。画像データは大きく、でも軽く、といった相反するものが一緒にいるようなものになっています。どれもこれも、様々なデバイスに対応するため。どんな場所からでもアクセスできるようにするため。 インパクトだけを狙うのではなく、そのサイトでは一体どんなものが必要なのか、ということをきちんと把握した上で工夫ができたらい... 続きを読む

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

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

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

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

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

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

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

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

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

wordpress3.5.1で使えるメンテナンスモードプラグイン「Maintenance by fruitfulcode」 |　バニデザノート

2013/02/25 26 users バージョン

wordpress3.5.1でも使えるメンテナンスモードプラグイン「Maintenance by fruitfulcode」。 対応バージョンは3.0以上となっています。 続きを読む

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

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

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

iphoneでかわいく写真を撮るヒント - バニデザノート

2012/12/10 55 users iPhone ヒント ひと iPhone標準 写真

iPhoneでかわいく写真を撮るために、わたしが気をつけていることを書いてみました。 わたしは、iphone標準のカメラアプリでまず撮影し いろんなフィルタアプリへ持っていくので、その流れで書いています。 写真って、本当は自由なもので、 どんなことをやってもいいんです。 基本を無視したトリッキーな写真は世の中にたくさんあります。 最初から勘がするどく、どんなカメラでも素敵な写真を撮ってしまうひとも... 続きを読む

自力でjqueryで動きをつけたい場合の考え方 - バニデザノート

2012/05/06 25 users jQuery フェード CSS プレゼンテーション 自力

なめらかに動くスライド、可愛いローディングやフェード、 次々と展開されるプレゼンテーション。 配布されている拡張ソースは圧縮されていて読めないし、 コピペすれば動いても、触れるのはcssとhtmlだけ。 だからなにがどうなってそうなるのか、 わからないままでもなんとなく使えてしまうjquery。 そのままでも一般的な動きは付けられますが 一歩すすんで要望や自分のイメージ通りにしようとしたときに ハ... 続きを読む

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

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

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