デザイン制作が捗る、個人的におすすめなAdobe XDの便利プラグイン 20 | NxWorld

2019/09/17 123 users デフォルト Adobe XD プラグイン 多数 アップデート

デフォルトでも便利な機能が多数用意されており且つ定期的にアップデートも行われているAdobe XDですが、プラグインを利用することでより効率よくデザイン制作を進めることができます。 便利なプラグインが数多く公開されていますが、それらの中でも個人的に特におすすめなプラグインを紹介します。 ※エントリー内では基... 続きを読む

VuePress入門 | NxWorld

2018/12/03 107 users

静的サイトジェネレータVuePressの導入からデフォルトテーマの簡単な設定までを紹介します。 Node.jsがインストール済みで少しコマンドが入力できさえすれば、Vueの知識がなくてもそれっぽいドキュメントがすぐ作れるような形で紹介しているので、興味ある方は試してみてください。 ※Node.js（Ver 8 以上）が必要になる... 続きを読む

追従ヘッダー実装時に使える動作・デザインパターン例 | NxWorld

2018/09/02 98 users

常にユーザーの視線に入るようにしておきたいとかサイトの回遊率をあげたいなどの理由で実装を頼まれることが多いと追従ヘッダー。 単純に基本となる見栄えを維持してそのまま追従させることも多いですが、少し変化を加えてほしいという要望をもらうことも少なくないので、そういった場面で提案しやすいようによくある動... 続きを読む

デザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則 | NxWorld

2018/05/18 74 users 媒体 配置 整列 近接 反復

webサイト・アプリ・雑誌・チラシなど媒体は問わず、見やすくて内容が伝わりやすいデザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則を紹介します。 1. 近接 - PROXIMITY 関係性の近い各要素の距離を近づけて配置 することで位置的にそれらが関係があるものと認識され、見ている人に理解されやすいデザイン・レイアウトを作ることができます。 その際、近接を上手く活用したいときに... 続きを読む

CSS：ボタンホバー時に背景がスライドしたり領域を覆うアニメーションサンプル 10 | NxWorld

2018/03/26 52 users ホバーエフェクト 見栄え 共通 アニメーション ホバー時

自分用に一覧化したものがほしくて作ったのでシェアします。 ボタンのホバーエフェクトとして見かける機会も多くなった、ホバーしたら背景がスライドしたり領域を覆うアニメーションのサンプルです。 アニメーションによってはホバー時の見栄えを維持するのではなく、ホバー時に一時的に見えるようなタイプもあります。 共通のHTML・CSS ここで紹介しているサンプルはいずれも下記のようなシンプルなHTMLをベースに... 続きを読む

GitHubを見やすく・使いやすくしてくれる便利な拡張機能 | NxWorld

2018/02/13 91 users GitHub アドオン Firefox githubページ

地味に便利なものから慣れるとなくてはならないものまで、GitHubを見やすく・使いやすくしてくれる拡張機能を紹介します。 ここではすべてChromeの拡張機能として紹介していますが、中にはその他のブラウザでも利用可能（主にFirefoxのアドオン）なものもあるので、それらは併せて紹介している各拡張機能のGitHubページなどから辿ってください。 ※以下で紹介している拡張機能の一部は、プライベートリ... 続きを読む

WordPressで更新者が少しでも使いやすい・更新しやすいと感じてくれる管理画面をつくるヒントやカスタマイズ | NxWorld

2017/11/21 227 users スキル クライアント 全部 普段 中心

個人的に普段から対応することが多いものを中心に、更新者（クライアント）が少しでも使いやすい・更新しやすいと感じてくれるようなWordPressの管理画面をつくるためのヒントやカスタマイズを紹介します。 サイト構成や更新者のスキルなどにもよると思うので全部が全部やるべきということでもないですが、紹介しているものをいくつか組み合わせるだけで不要なものはすべて取り除いたシンプルな管理画面にできたり、少し... 続きを読む

Flexboxを利用してよくあるレイアウトを実装したサンプル集 | NxWorld

2017/11/16 118 users Flexbox プレフィックス 見栄え CSS レイアウト

一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなCSSで実装できるレイアウトが増えました。 そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。 ※以下で紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記... 続きを読む

CSSでアンダーラインが追従するメニューを実装する方法 | NxWorld

2017/11/01 69 users デモ JavaScript CSS 実際 アンダーライン

以前であればJavaScriptを利用して実装していた、メニュー下にあるアンダーラインをホバーしたメニューへスライドしながら追従する動きをCSSのみを使って実装する方法です。 デモ どのようなものなのか実際の動きを見たほうが早いと思うのではじめにデモを紹介すると、このようにメニュー下にあるアンダーラインがホバーしたメニュー下へスライドしていくという動きになり、JavaScriptは使用せずにCSS... 続きを読む

デザイン制作を助けてくれる国内外の素材サイトまとめ | NxWorld

2017/10/24 935 users 有償 アイコン 素材 商用利用時 かなり

見つけてはメモしていたものがかなり増えてきて自分用に整理したのでシェアします。 ベクター・ラスター・テクスチャ・パターン・アイコン・フォント・モックアップなど、デザイン制作をする際に便利な素材を配布しているサイトの一覧です。 中には条件付きで使用可能とか商用利用時は有償という素材が中心に配布されているところもありはしますが、紹介しているのは基本的にフリーで使用できるものが中心または多く配布されてい... 続きを読む

CSSアニメーションを簡単に実装できるライブラリ 10＋ | NxWorld

2017/10/11 66 users class CSS ゴー アニメーション デモ

ここ数年でちょっとしたアニメーションはJSではなくCSSで実装するということが増えたと思いますが、それを手軽に実装したいときに便利なCSSアニメーションライブラリをまとめてみました。 いずれも必要なCSSを読み込んで要素に特定のclassを付与するだけと使い方も簡単で、デモもしっかり用意されているものばかりなので動きの確認も容易です。 また、簡単な操作でCSSアニメーションを実装するのに必要なコー... 続きを読む

CSSを使ってテキストカラーを半々に表示させる方法 | NxWorld

2017/10/02 91 users 半々 relative CSS inline-block デモ

CSSを使ってテキストカラーが左右または上下で異なるカラーで表示されている見栄えを実装する方法を紹介します。 ※以下でそれぞれ紹介しているCSSは必要な記述のみ抜き出した形で紹介しているので、デモと全く同じ見栄えにしたい場合はCodePenの表示を切り替えてCSSを確認してください。 また、 position: relative; と display: inline-block; の部分は使用する... 続きを読む

より効率よくPhotoshopを使うために知っておきたい便利機能 25 | NxWorld

2017/09/27 76 users 便利機能

主にこれからPhotoshopを使い始めようと思っているとか使い始めたばかりという人向けに、知っておくと便利な機能を紹介します。 ひとつひとつはちょっとしたことでも多用するのであれば覚えておくことでより効率よく作業することができますし、中には使いこなすことができれば大幅な作業時間の短縮に繋がるものもあります。 ※ここで紹介しているのは「Adobe Photoshop CC 2017」を使用した想定... 続きを読む

Twitterの新UIで使用されているような、丸みがあって可愛いシンプルタイプのアイコンセット 10＋ | NxWorld

2017/07/04 51 users アイコンセット Twitter 丸み ご存じ アイコン

ご存じの方も多いように少し前にTwitterのデザインがリニューアルされ、大きな特徴のひとつとして入力欄・ボタン・アイコンなど全体的に丸みを帯びた印象のデザインになりました。全く同じものでなければTwitterのアイコンに比べると丸みが少なめなものもありますが、同じようなアイコンを使いたいときに利用させてもらえそうな、丸みがあって可愛いシンプルタイプのアイコンセットを集めてみました。 ※以下で紹介... 続きを読む

Web制作者（フロントエンド・マークアップエンジニア向け）がブックマークしておきたい、便利なチートシートやリソースのまとめ | NxWorld

2017/06/05 71 users デバイス 特定 日頃 マークアップエンジニア 普段

普段制作している上でうっかり忘れてしまったときにさっと確認することができる便利なチートシートや特定の情報がわかりやすくまとめられているリソースなどまとめてみました。主にフロントエンドやマークアップエンジニアの方が日頃から利用することが多いと思うHTML・CSS・JavaScriptに関するものが中心で、他には各ブラウザのバグ情報を検索したり様々なデバイスの情報がまとめられたサイトなどもあります。 ... 続きを読む

高品質で商用利用も可能な日本語フリーフォント 20 | NxWorld

2017/01/24 78 users フォント 以下 少ない印象 記事公開時点 少し

数年前まで少ない印象だった日本語フリーフォントですが、最近では少し探すだけでひと通り漢字も利用できて高品質なのにも関わらず商用利用可能というフォントも数多く出てきます。今回はそんな数ある日本語フリーフォントの中から、商用利用も可能で個人的によく利用させてもらっていたり、覚えておきたいと思ったものを紹介します。 ※以下で紹介しているフォントはいずれも記事公開時点では商用利用可能となっているものですが... 続きを読む

jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 | NxWorld

2017/01/11 482 users jQuery プレフィックス ヘッダー 見栄え ナビゲーション

一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 ※プレフィックスは必要に応じて追記してください。 ※以下で紹介している方法はいずれもjQueryを使用していますので、あらかじめ読み込ませてくだ... 続きを読む

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 | NxWorld

2016/05/14 132 users ウインドウサイズ auto 横幅 img height

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置して width:100%; と height:auto; を指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画... 続きを読む

フロントエンドエンジニアにオススメする参考になりすぎるブログ10選 - North-Geek

2016/04/20 350 users North-Geek バシャログ ICS MEDIA 参考

Webサイト制作時に、僕がいつもお世話になっている素晴らしいWebメディア・ブログがいくつかあります。 そこで今回はいつも参考にしている フロントエンドエンジニアにオススメのブログ を紹介します。 dwango creators' blog おすすめ記事 バシャログ。 おすすめ記事 ICS MEDIA おすすめ記事 commte おすすめ記事 NxWorld おすすめ記事 Syncer おすすめ記... 続きを読む

バナーデザインの制作フローやレイアウト、参考になるエントリー・デザインギャラリーをまとめてみました | NxWorld

2016/01/26 237 users バナーデザイン ターゲット レイアウト 領域 制作フロー

バナーデザインは決められた領域内でどれだけユーザーやターゲットの目にとまるようなデザインにできるかが重要になってきます。デザイン制作したことあるなら一度は経験したことあると思いますが、領域が決められているけどその中でしっかり伝えたい内容を目立たせる必要があるので、何度もレイアウトを調整したり、結局時間をかけて完成してもいまいちな出来になってしまったりなんてことも…。そこで今回は、バナーデザインをす... 続きを読む

data属性を利用したナビゲーションの実装サンプル | NxWorld

2016/01/23 76 users アニメーション ホバー時 HTML カスタマイズ テキスト

タイトル通り、テキストのみで作られたようなシンプルなナビゲーションにdata属性を利用したカスタマイズを施した実装サンプルです。いずれもカスタマイズといっても簡易的なものばかりで、ほぼホバー時の動きにはなりますが、紹介しているような方法を使うことでHTMLに記述する要素を少し減らすことができたり、ちょっとしたアニメーションを加えたりすることもできます。また、あまりdata属性を使ったことがないとい... 続きを読む

CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10 | NxWorld

2016/01/21 139 users 備忘録 ハンバーガー ハンバーガーメニュー エフェクト 見栄え

画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。 その他のハンバーガーメニューアイコンのエフェクト 先述したように以前にも同じようにCSSで実装したハンバーガー... 続きを読む

CSSの:nth-childと:nth-last-child擬似クラスの使用例 | NxWorld

2016/01/18 67 users nth-child 備忘録 CSS 擬似クラス 一瞬

今更な内容になりますが、未対応だったIEのサポート終了によって今後ますます使う場面は増えるでしょうし、恥ずかしながら指定方法によっては一瞬どう記述するかど忘れしちゃうことがたまにあるので備忘録も兼ねて。CSSの擬似クラスにある「:nth-child」と「:nth-last-child」の使用例を自分が見たい時にすぐ確認できるようひと通りまとめました。 説明時に利用しているサンプルイメージやソースは... 続きを読む

CSSでリストの最初と最後のボーダー（border）を非表示にする方法 | NxWorld

2016/01/15 63 users border 最初 CSS ボーダー HTML

タイトル通り、リストでボーダー（border）を指定しているけど最初と最後のボーダーは非表示にしたいという時に使えるCSSの小ネタです。最初と最後とは言っていますが、要は最初のボーダーを非表示にするという感じで全部で4つの方法をご紹介します。 以下で紹介しているのはいずれも上のイメージのようによく見るリストで、ボーダーが最初と最後に引かれていないものを実装する方法です。 HTMLは以下のように u... 続きを読む

背景にひと手間加えたい時に便利なスクリプト 10+ | NxWorld

2016/01/12 166 users パーティクル jQueryプラグイン 単体 領域 スクリプト

ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい…」という時に便利そうだと思うスクリプトを幾つかまとめてみました。jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。 背景にひと手間加えたい時に便利なスクリプト ... 続きを読む