デザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則 - NxWorld
webサイト・アプリ・雑誌・チラシなど媒体は問わず、見やすくて内容が伝わりやすいデザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則を紹介します。 近接 - PROXIMITY 関係性の近い各要素の距離を近づけて配置することで位置的にそれらが関係があるものと認識され、見ている人に理解されやすいデザイン・レイアウトを作ることができます。 その際、近接を上手く活用したいときに気を付けたいポイントは余白で、何となくでつけるのではなく関係性があるものとそうでないものでそれぞれ異なる余白にすることです。 上のイメージは様々なスポーツのボールイメージと競技名を並べたものですが、近接が考慮されていないためにそれぞれどのボールがどの競技なのかがわかりづらい印象があります。 これを近接を意識して配置し直したのが下のイメージで、関係性がわかりやすくなり上のイメージに比べてどのボールがどの競技
Sass(SCSS)のマップを利用したカラーコード管理 - NxWorld
Sass(SCSS)でのカラーコード管理方法として、マップを用いたら良さそうと思い試してみたものです。 もっと便利な感じにできそうで正直そこまで使いやすいと感じたわけでもないですが、そのまま消すのもあれだったので備忘録として残しておこうと思います。 Sassでカラーコードを管理しときたいなってとき、自分の場合はそれ用のSCSSファイルとか用意し、そこに下記のような感じで各カラーを変数定義しておくことが多いです。 $color-red : #e74c3c; $color-red-light : #f09188; $color-red-dark : #b82617; $button-color : #333; $button-hover-color : #888; $button-active-color : #2ecc71; $sns-twitter : #55acee; $sns-face
gulp：ディレクトリ・ファイル構成を維持してdestする - NxWorld
gulpで何かしらのタスクを実行後などにgulp.dest()する際、ディレクトリ・ファイル構成をそのまま維持して出力させる指定方法の備忘録です。 サンプルのディレクトリ・ファイル構成と実装したい動きについて ここで紹介しているものは下記のようなファイル構成のものを使用していると想定します。 また、動きとしてはgulp.dest()使用時にこの構成のまま/distに出力する（/srcが/distになる感じ）というものになります。 └─ /src ├─ index.html ├─ /css │ └─ style.css ├─ /js │ └─ script.js └─ /images ├─ img_01.jpg ├─ img_02.jpg └─ img_03.jpg /**/*で指定 手っ取り早くディレクトリ・ファイル構成を維持しつつすべてをgulp.dest()したいときは、下記のようにg
jQuery Snippets #7 - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第7弾です。 動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して確認してください。 画像のアスペクト比を割り出して、値によって処理を加える 例えば複数の画像を並べて表示したいという時に、同じサイズや同じ縦横比であればCSSなどで容易に調整可能ですが、それが横長や縦長など異なるサイズ（アスペクト比）で且つどのようなものが入ってくるのかを限定できない時などに利用できます。 jQueryを下記のように記述することでアスペクト比によってそれぞれ別の処理を実装することができ、例えばCSSのposition: absolute;とネガティブマージンを組み合わせることで、ど
バナーデザインの制作フローやレイアウト、参考になるエントリー・デザインギャラリーをまとめてみました - NxWorld
バナーデザインは決められた領域内でどれだけユーザーやターゲットの目にとまるようなデザインにできるかが重要になってきます。 デザイン制作したことあるなら一度は経験したことあると思いますが、領域が決められているけどその中でしっかり伝えたい内容を目立たせる必要があるので、何度もレイアウトを調整したり、結局時間をかけて完成してもいまいちな出来になってしまったりなんてことも...。 そこで今回は、バナーデザインをするにあたって覚えておきたいレイアウトやデザインパターンをはじめ、効率良く制作していくことができる制作フロー、特に新米デザイナーさんなどには非常に参考になると思うので是非目を通して欲しいエントリー、インスピレーションをもらえるバナー関連のデザインギャラリーといった、バナーデザインの制作に関連することをまとめてみました。 バナーデザインの制作フロー 後ほど紹介するエントリーでこのような内容に関
背景にひと手間加えたい時に便利なスクリプト 10+ - NxWorld
ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」というときに便利そうだと思うスクリプトを幾つかまとめてみました。 jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。 背景に画像や動画のスライドショーを実装できる「Vegas」 背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。 また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。
webサイト制作や勉強をする際に役立つ便利なツール・サイトまとめ 100＋ - NxWorld
画像の軽量化やコード圧縮といったツールをはじめ、各種リファレンスサイト、利用している人が多いエディタやデザインツールのショートカット一覧など、web制作時に便利だと思うツール・サイト・チートシートを自分のブックマークがかなり乱雑化してきたのでその整理も兼ねて一気にまとめてみました。 もちろん他にもこういった便利なものは沢山ありますし、自分も普段からここで紹介しているもの全てを利用しているというわけではないのですが、こういったものを利用することで人によっては大幅に制作時間を減らすこともできると思います。 また、覚えておくとど忘れした時に容易に確認等もできたり、勉強時の参考にすることができるものもあります。 September 01, 2020 更新 リンク切れサイトを削除しました。（100サイト以下に縮小しました...。） January 16, 2016 追記 新たに5サイトを追加して10
背景デザインに役立つ背景・テクスチャ・パターン素材 50 #2 - NxWorld
マーブル、ウォーターカラー、ウッド、ブラー、グランジなど背景デザインに役立つ素材全30種類です。 シンプルで使いやすそうなものから使い所は難しいですが上手く利用すれば独特な表現をできそうなものまで様々なものがあります。 紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
スライドショーで実装されているページネーションのデザインショーケース - NxWorld
webサイトでよく見かけるコンテンツのひとつにスライドショーがありますが、実装している多くのサイトでスライド切り替えができるページネーションが設置されています。 サイトによってはこのページネーションの部分もしっかりとデザインしているところもあるので、同じくこういった細かいところまでこだわりたいときに参考になりそうなページネーションデザインをタイプ別にまとめてみました。 デザインショーケースとは言っていますが中には少しアニメーションを加えているのもあるので、見栄えだけでなく動きの面でも参考になるサイトもあります。 サークル 見かけることが多いと思うサークルタイプのページネーションを用いているサイトです。 スライダーやカルーセルといったjQueryプラグインなどでも、予め設定されているスタイルでこのサークルタイプを用いているものが多いですね。 ほとんどがシンプルで同じような見栄えではありますが
ヒーローイメージにCSSで実装するグラデーションを組み合わせたサンプル - NxWorld
ヒーローイメージとはファーストビューでドーンと表示される大きなイメージのことで、海外だけでなく国内でも取り入れているサイトを見かけることが多くなってきました。 そんなヒーローイメージにCSSで実装したグラデーションを組み合わせたサンプルです。 グラデーションを重ねる 単純に画面いっぱいに表示した背景画像の上にグラデーションを重ねたものです。 HTMLは.heroを指定したdiv要素のみを使用し、CSSは下記のように記述します。 .hero { height: 100vh; background: linear-gradient(-45deg, rgba(229,93,135,.7), rgba(95,195,228,.7)), url(background.jpg) center center / cover no-repeat; }
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
Monthly Bookmarks 2014/10 - 2014/12 - NxWorld
2014年10月〜2014年12月の個人的ブックマークです。 2014/10 Development SweetAlert WordPress のカスタムフィールドを簡単・便利に使えるようになるプラグイン「Smart Custom Fields」作った。 | モンキーレンチ Rounded Animated Navigation in CSS & jQuery A Wonderful Collection Of Free jQuery & CSS3 Image Hover Effects | SmashingApps.com progressbar.js 新鮮なアイデアが満載！アニメーションやスクロールを使った実装テクニックのまとめ | コリス Apple's iMac scrolling effect Kiwi-slider Wobbly Slideshow Effect | Codro
インスピレーションがもらえてデザインの参考になる、国内外のデザインギャラリー - NxWorld
デザイン制作時の参考にしたりインスピレーションがもらえる、主にwebデザイン向け国内外のデザインギャラリーを紹介します。 主にwebデザイン向けになりますが、一部デザイン全般で参考になるサイトもあります。 中には特定のテーマやパーツに絞ったデザインのみを紹介しているギャラリーもあるので、日頃デザインしていて「この雰囲気のデザインをいつも悩む」とか「この部分の引き出しを増やしたい」という人は、そういったサイトを日頃からチェックするのがおすすめです。 過去にもこういったデザインギャラリーをまとめて紹介したエントリーを書きましたが、クローズしたサイトが目立ってきたり見つけた当時とは収集しているデザインが異なるテーマになっているサイトなどもあったので、それらの編集・削除も兼ねつつすべてひとまとめにしました。
jQuery：スクロールで表示されるページトップの実装方法 - NxWorld
数多くのサイトで実装されているのを見かける、ページを一定量スクロールすると出現する「このページの先頭へ」のようなページトップを実装する方法を紹介します。 このブログでも実装している（現在は未実装）のですが、同じような動きを実装したいというお問い合わせをいただいたのでその方への回答も兼ねて、動きが被っている感じですが全7タイプの実装方法を紹介します。 最近ではちょっと変わったタイプも多く見かけますが、今回は凝ったアニメーションなども特にないシンプルなものなので、どんなタイプのサイトにも合わせやすいかと思います。 はじめに ここで紹介している実装方法は全てjQueryを使用していますので、あらかじめjQueryを読み込ませてください。 また、HTMLは全て下記のものを使用しています。 紹介しているサンプルはclassにpagetopを用いて実装していますので、class名を変更した場合はCSS
ポリゴンスタイルやジオメトリックスタイルの背景素材 30 - NxWorld
個人的にすごい好みなので、いつか機会があれば使用させてもらおうと思って見かけてはメモしていた、ポリゴンスタイル（Polygo or Low-Poly）やジオメトリックスタイル（Geometric）の背景素材を整理兼ねてまとめました。 中には有償素材もありますがどれも安価なものですし、様々なデザインが数十種類同梱されているようなものなのでお得だと思います。 個人的に今までは同系色を使ったものを多く見かける印象でしたが、カラフルなものやブラーやグラデーションといった別の効果を組み合わせているようなものも多いです。 紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。
jQueryプラグイン 50
少し古いのもありますが、今年見かけたものを中心にフォーム周りでいつか使う機会がありそうだと思ったjQueryプラグインのまとめです。 バリデーションや各フォームエレメントのデザイン変更といったオーソドックスなものから、上手く使えばユーザビリティの向上に繋がりそうなもの、他ではあまり見ないユニークな動きを実装できるものまで様々なタイプがあります。 中にはCSS3を併用したりそのままでは日本語に対応していないというものも幾つかあるので、使う際にはブラウザやデバイス環境によっていろいろ確認する必要はあるんですが、いずれも便利なプラグインばかりです。 exValidation プラグイン作者が日本の方なので、ひらがなやカタカナといった日本語のチェックもできるバリデーションプラグイン。 Validetta シンプルで軽量なバリデーションプラグイン。 jQuery Valideasy 見た目がシンプル
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Page Not Found - NxWorld
CSSやSVGで実装するローディングアニメーション - NxWorld
