いまさら聞けない？グリッド・システムでのデザインの基礎 | バニデザノート
続きを読みたい方は、noteにてご購入おねがいします。 //// ▼ばにのUdemyのウェブ制作講座「Photoshopでプロになる！オシャレ＆クールなウェブデザイン講座」でも、グリッドシステムを使用してPhotoshopウェブデザインを進めています。 関連記事 【note】Web,ios,Android等で無料で使える！クリーンな汎用オープンソースアイコンセット３種 2018/09/13 タイポグラフィ・カラー・レイアウト・・デザインをこれから学びたい初心者の方に、デザインの基礎の全体像が掴める動画を紹介 2018/06/19 UIデザインに使用できる、クールで美しいグラデーション配色セットをダウンロードできるサイトを紹介 2018/06/11 いまさら聞けない？グリッド・システムでのデザインの基礎 2018/03/09 Illustratorでアセット書き出しした際に、マスクした部分が
アートブラシで描いたような手書き風文字をイラストレーターで表現するチュートリアル | バニデザノート
アートブラシや筆ペンで描く今風のカリグラフィーをイラレでずっと描きたいと思っていまして。イラレの線幅ツール（CC3以降？）である程度表現することが出来そうなので、手順を書いてみます。 ※たぶん中〜上級者向け。ある程度イラレがわかる人じゃないとついてこれないかもです。
photoshopの「レイヤーからの画像アセット」機能でスライス切りからサヨナラできるかも。 | バニデザノート
photoshopの「レイヤーからの画像アセット」機能。 前から気になっていたのですが、やっと試せました。 これは速いですねー。photoshop CC 2014.2.2リリースのバージョンでの 使い方をすこし解説します。 今までは、psdカンプを作成したあと、「スライス」ツールを使って スライス枠を作り、書き出し用のファイル名を別ウィンドウで書き込み、 「Web用に保存」ウィンドウを開き、出力設定を行い、 さらに背景などを切り出し・・と、htmlでコーディングするためのパーツを書き出すためにはたくさんの手順が必要でした。 「レイヤーからの画像アセット」機能でも、ウェブ用のパーツを書き出すのですが 上記手順に比べるとすごく少ないステップでパーツが書き出せるようになります。
ウェブデザイン配置のちょっとした「もやもや」をスッキリさせる解決例。 | バニデザノート
ウェブデザインでの配置で、「ルール通りにやっているのにどこかうまくいかない」場合にどうやって解決していくかを考えてみました。今回の例題画像は、すべてクリックすると100%表示のデータを表示するようにしてあります。 ウェブデザインのちょっとした「もやもや」を、少しだけスッキリしたデザインにするヒントになれば嬉しいです。
2014年の１月時点でのウェブトレンドをおさらい。 | バニデザノート
2014年の１月時点でのウェブトレンドをおさらいします。豊富な表現と、ソースコードはシンプルに。画像データは大きく、でも軽く、といった相反するものが一緒にいるようなものになっています。どれもこれも、様々なデバイスに対応するため。どんな場所からでもアクセスできるようにするため。 インパクトだけを狙うのではなく、そのサイトでは一体どんなものが必要なのか、ということをきちんと把握した上で工夫ができたらいいなぁと思います。
トレンドのフラットデザインとは対照的なスーパーコラージュ＆リッチなキャンペーンページ | バニデザノート
ちょっと前にトレンドになって、展開され始めて可愛いサイトが沢山でてきている中、別勢力、と言ったらいいのでしょうか。 女性向け製品のキャンペーンページ（LPページ＆サイト）が非常に「見た目的に」リッチで、コーディングもHTMLのベースのやり方とも違う、「とにかく目立てばいい☆」「ボタンがどれかはお楽しみ☆」という趣旨であろう、キャンペーンページを見かけたので、ご紹介します。
photoshopでのウェブデザインの勘どころ | バニデザノート
Photoshopで複数ページのカンプデザインを展開するとき、ファイルは一括にするのか、それとも１ページごとに作成するのか、その際共通オブジェクトをどう扱うかといったデータ・ファイル管理についてまとめてみました。また、Photoshopでのウェブデザインの際に便利そうなツールや「やり方」も合わせて考えてみました。
レスポンシブデザイン対応のlightbox系プラグイン＋コンテンツスライダー系プラグイン | バニデザノート
・シンプルイメージlightbox ・ギャラリーlightbox ・videoやmapのポップアップ ・Ajaxポップアップ など、使い勝手がよい基本機能が揃っています。 →Unslider 関連記事 きっと初心者でもわかる、HTMLの書き方の考え方。 2014/12/14 読んでもらえる、ファンになってもらえる、ブログの書き方とデザイン。 2014/11/20 web制作で気疲れしないようにする方法を考えてみました。 2014/10/17 最近気になったウェブ制作に関するキーワードを振り返ってみる 2013/06/30 レスポンシブデザイン対応のlightbox系プラグイン＋コンテンツスライダー系プラグイン 2013/05/31 自分でできる！Facebookページの活用方法 2013/04/11 Webで発信するすべてのWEBビギナーさんへ。突然犯罪や裁判に巻き込まれないようにするため
自分でできる！Facebookページの活用方法 | バニデザノート
なんとなく「Facebookページ」が重要になってきているのはなんとなくわかっている、けれど、実際どんなもので、どんな風に運用していけばいいのかわからない。そんな方に向けて、活用方法を書いてみたいと思います。 Facebookのアカウントを持っている方はだいぶ多くなってきたと思います。 友人の近況を見たり、自分の写真をアップロードしたりして、楽しんでいる方も多いのではないでしょうか。 「Facebookページ」と聞くと、自分のアカウントにページを持つ、もしくは、新たなアカウントを作成するような印象を持つ方もいらっしゃるとおもいます。 Facebookでは、基本の実名アカウントがあって、そのアカウントをベースにいろんなことができるツールと考えていただければわかりやすいかとおもいます。 Facebookページは、個人のアカウントから生成できる、新たな「人格」で、複数作成することができます。また
レスポンシブデザインとブレークポイントからこれからのウェブを考える | バニデザノート
googleからNexus7が格安で販売されていたり、microsoftからsurfaceが日本でも発売になったり、 ますますタブレットでのウェブビューイングが広まっていくのは必至でしょう。 そんななか、検索エンジンでもあるgoogleが推奨しているのはレスポンシブ表示。 今回は、そんなレスポンシブなサイトを作る際のブレークポイントをキーにして 実際どんなものが作られているかを交えて考えていきたいとおもいます。 ざっくり言うと、どのサイズでどの表示をするかというのをピクセル幅で切り替えていくポイントのことです。 320, 480, 600, 768, 1024 あたりで区切ります。 googleのドキュメントにもあるように @media only screen and (max-width: 640px) {...} のようなカタチでCSSを切り分けていきます。 1024と320のみのPC
Wordpressの公式テンプレート階層チャートで命名規則をチェック | バニデザノート
wordpressをCMSとして利用するとき、カスタム投稿タイプやカスタムタクソノミーを扱うことが増えてくると思います。各タクソノミーごとに表示を切り替えたい場合などに、Wordpress公式のテンプレート階層チャートを参照すると便利です。 if (is_category(9)) { // カテゴリ 9 に当てはまるとき include(TEMPLATEPATH . '/single2.php'); } else { // 他のカテゴリの投稿のとき include(TEMPLATEPATH . '/single1.php'); } ?> →wordpress codex の「テーマの作成」のクエリベースのテンプレートを御覧ください。 この場合、category.phpとかindex.phpとかで分岐してくれればわかりやすいのですが includeにincludeを重ねて参照を繰り返し、せっ
ネットショップを簡単に設置できるC2Cサービス「stores.jp」と「BASE（ベイス）」 | バニデザノート
商品ひとつから、誰でもネットでモノを売れるサービス。しかも無料からはじめられます。 個人から個人へのサービスということでC2Cなんて言われますが、外資系の企業や実店舗を持つオーナーさんも効果的に使っているようです。 もちろん、使い方は無限大なのは前提といたしまして。 商品数は少なめのほうが管理しやすそうです。手作りの雑貨や、家具、キャンペーン中の商品のみの展示など、１点〜３０点くらいで管理していくようなイメージでしょうか。 公式サイトとデザインを合わせて、カテゴライズして、いろんなカテゴリーに紐付けして、といわゆる今までのネットショップのように運営が目的であれば、カラーミーショップさんとかを使ったほうがおすすめです。 商品の人気をはかるような、広告的な役割で使うのもよさそうです。
ウェブデザインのインスピレーションを受けられそうなギャラリーサイト | バニデザノート
最近のウェブサイトのデザインってどんなの？と気になったり アイデアやインスピレーションを受けたいときに見たいサイトをいくつか紹介します。 ■日本語サイト S5-Style 検索したときに的確に抽出できる印象。キレイめからシンプルまで。RSSも読みやすい。 Web Design Clip 大手系、キレイ系が多い感じ。 WONDER BOOKMARKS シンプル系、かわいい系、工夫凝らし系がおおい感じ。 ■海外サイト Web Creme シンプルで、おしゃれなサイトが多いです。 Web Design File いわゆる「ザ☆海外サイト」なデザインをクリップ。 日本サイトではあまり見ないようなシンプルでダイナミックな工夫を凝らしたサイトがたくさんあります。 ■Pinterest Pinterest search results for web design Pinterestでweb+desig
ここ最近使ってみて便利だったWordpressプラグイン | バニデザノート
■ Contact Form 7 http://contactform7.com/?lang=ja メールフォームプラグイン。 普通にメールを送信できるだけではなく、 フォーム本体に好きなclassをつけたり、返信メールのカスタマイズも自由自在。 最近capcha機能も見つけてテンション上がりました。 通常送信先メールへの宛先の他に、bccでメールのコピーを送ったり 送信完了ページも作れます。 Akismetでのスパム対策もできます。 ■ Duplicate Post http://wordpress.org/extend/plugins/duplicate-post/ Wordpressのページを複製するときに使います。 ページ送りの表示などで大量にページを投下してテストしたいときに便利です。 投稿リストからも、投稿ページからもコピーできるのもすばらしいです。 ■ カスタムフィールドをカ
きっとトラブルが起きにくい！ウェブデザインの制作順序を書きました。 | バニデザノート
ウェブサイトの制作には、いくつかのフェーズがあります。 企画→制作→構築→公開を何度もくりかえすこともあり、スパイラル方式なんて言われることもあります。 今回は、ウェブサイトの制作順序を書いてみたいと思います。 むかしはこういった文章をブログなどで書く方が多く、本もたくさんあったのですが 今は知識や技術に偏ったものがおおく、目に触れることが少なくなったのかもしれません。 もしくは、あたりまえのことだから言わなくなったのかもしれません。 しかしながら、ウェブを気持ちよく制作するために基本というのは重要なことだとおもい 再確認もこめてかきました。 ウェブ制作を行なっている人、 これからウェブの業界に入りたいとおもっている人、 これからウェブを発注する予定のある企業の方に読んでいただければいいなぁと思っています。 ・ヒアリング どんなサイトにしたいのかをお客様へお伺いします。 対象となるブラウザ
Fireworksの微妙な色の調節に、「ブレンダー」が便利です。 | バニデザノート
Fireworksで、微妙な色の調整をするときに 毎回パレットをぐりぐりするのが面倒で、なにかいい方法はないかと調べたら 「ブレンダー」というパネルがあるようです。 今回はこの「ブレンダー」を紹介いたします。 Fireworksでは、ツールの色ボタンを選択するとwebカラーのパレットが開いて そこからもう少しくわしい「カラー」パネルにすすむことができます。 だいたいはwebカラーのパレットであたりをつけたあと、 この「カラー」パネルの横のバーで 明度を上げ下げすれば「すこしあかるく」「すこし暗く」みたいな 色調整が可能なのですが オレンジ系統の色など、中間色に関しては、 上記のように明度を上げられず、「もっと明るく」ができない場合があります。 こういった場合は直接真ん中の丸いグラデーションのポインタを 黄色側か、白側に動かすのですが、なかなかうまく色がでない。 赤によりすぎたり、黄色になり
タグの閉じ忘れをチェックするブックマークレットが便利。 | バニデザノート
タグの閉じ忘れをチェックするブックマークレットを紹介します。 もう数年使わせてもらってます。 コーディングがほぼ終わった状態で、カラム落ちとか なにか表示がおかしいとき、divタグなどの閉じ忘れってよくあるのですが どのタグ周辺の閉じタグがないのかをワンクリックでチェックしてくれるものです。 使い方は簡単で、こちらのページのインストール項目の「タグ対応をチェック」というリンクをドラッグしてブックマークツールバーに入れるだけ。 あとは、チェックしたいページで さきほどブックマークツールバーに入れたブックマークを押すと 自動でチェックしてくれます！ ご参考にどうぞ。 HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] 関連記事 セリフ体をうまく利用しておしゃれな印象の４サイト 2011/12/26 Fireworksの微妙な色の調節に、「ブレンダー」が便利です。 2011/12
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインのなかで主役にもサブにも使えそうな極細フォント | バニデザノート
wordpress3.5.1で使えるメンテナンスモードプラグイン「Maintenance by fruitfulcode」 | バニデザノート
【レスポンシブ対応！】基本最低限、カスタマイズするだけの無料wordpressテンプレート「bee-responsive1.0」 | バニデザノート