ダミーの顔写真が必要なときに便利な「UI Faces」 - NxWorld
「UI Faces」は様々な人物の顔写真が集約されているサイトで、テスト時やデザインのモックアップなどでとりあえず顔写真が必要なときに便利です。 基本的に海外の方達になりますが、性別・年齢・感情などでフィルタリングもできるようになっているので、利用したいタイプの人物を探すのも容易だと思います。 上のキャプチャのようにページ上部にフィルタリング機能が用意されており、参照元・年齢・性別・髪色・感情の5つの項目をそれぞれ選択することで目的の人物画像を探しやすい作りになっています。 また、Sketchでこれらの画像を簡単に使えるプラグインと件数や性別などを指定して扱えるAPIも用意されているので、ダミーの顔写真を利用する機会が多いとか手っ取り早く用意したいときはこれらを利用することでより便利です。
ネガティブスペースを上手く使ったロゴデザイン 30 - NxWorld
ネガティブスペースを上手く使ったロゴデザインをまとめたデザイン備忘録です。 文字や要素を組み合わせて空間を上手く使うことで新たな文字やアイテムが見えてくるデザインで、参考にするのはもちろん、眺めているだけでも面白いです。
WordPress構築時のスピードアップに役立つジェネレータまとめ - NxWorld
WordPressでテーマやプラグイン作成時のベースとなるテンプレートをはじめ、カスタム投稿実装・カスタムタクソノミー実装・ウィジェット実装・管理画面のUI変更などのコードなどをダウンロードできたり表示してくれるジェネレータのまとめです。 普段からスラスラ構築できるとかある程度ベースとなるものが既にある場合は不要かもしれませんが、そうでない場合はこういったものを活用することで構築のスピードアップに繋げられると思います。 Underscores ベースとなるテーマをビジュアル下の「GENERATE」ボタンからダウンロードすることができます。 そのままダウンロードするだけでなく、Advanced Optionsでテーマ作成時にstyle.cssの上部にコメントで記述するテーマ情報を設定したり、Sass(SCSS)を同梱してダウンロードすることも可能です。 Child Theme Generat
Flexboxを利用してよくあるレイアウトを実装したサンプル集 - NxWorld
一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなHTML・CSSで実装できるレイアウトが増えました。 そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。 紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記してください。 基本的に各実装に必要なFlexbox関連の最小限のコードのみ紹介していますが、サンプルによってはわざわざ初期値（flex-wrapやalign-itemsなど）を指定している場合があります。 それらは挙動を把握しやすくするために記述されているものなので、不要であれば記述する必要はありません。 表示確認のデモはPCでの閲覧推奨です。 要素を両端に寄せる 特にヘッダーやフッターで利用
CSSでアンダーラインが追従するメニューを実装する方法 - NxWorld
以前であればJavaScriptを利用して実装していた、メニュー下にあるアンダーラインをホバーしたメニューへスライドしながら追従する動きをCSSのみを使って実装する方法です。 どのようなものなのか実際の動きを見たほうが早いと思うのではじめにデモを紹介すると、このようにメニュー下にあるアンダーラインがホバーしたメニュー下へスライドしていくという動きになり、JavaScriptは使用せずにCSSのみで実装しています。 HTMLは下記のようなものを使用し、a要素は単純なリンクで.nav-underlineが追従してくるアンダーラインで使用する要素になります。 また、ハイライト表示している付与されているclassはよくあるカレント表示用に見栄えを異なるものにするのに使用するclassになっており、これをそのまま使用した場合は上のデモにあるように3つ目のメニュー下にアンダーラインがあるのが初期表示と
CSSアニメーションを簡単に実装できるライブラリ 10＋ - NxWorld
ここ数年でちょっとしたアニメーションはJSではなくCSSで実装するということが増えたと思いますが、それを手軽に実装したいときに便利なCSSアニメーションライブラリをまとめてみました。 いずれも必要なCSSを読み込んで要素に特定のclassを付与するだけと使い方も簡単で、デモもしっかり用意されているものばかりなので動きの確認も容易です。 また、簡単な操作でCSSアニメーションを実装するのに必要なコードを出力してくれる便利なジェネレータも併せて紹介します。 Animate.css 共通classである.animatedと各アニメーション用のclassを付与することで実装でき、アニメーションをループさせるclass（.infinite）も用意されています。 76アニメーション用意されており、ライセンスはMITです。 cssanimation.io 基本的には共通classである.cssanima
CSSを使ってテキストカラーを半々に表示させる方法 - NxWorld
CSSを使ってテキストカラーが左右または上下で異なるカラーで表示されている見栄えを実装する方法を紹介します。 以下でそれぞれ紹介しているCSSは必要な記述のみ抜き出した形で紹介しているので、デモと全く同じ見栄えにしたい場合はCodePenの表示を切り替えてCSSを確認してください。 また、position: relative;とdisplay: inline-block;の指定は使用箇所によっては別の値に変更したり不要なら削除してください。 疑似要素とdata属性を使う このデモで表示されているようにテキストのカラーが中央を境に半々になっているのを疑似要素とdata属性を使って実装する方法です。 まずHTMLは下記のようなものを使用し、その際に中に記述する内容と同じテキストをdata属性（data-split）にも記述します。
より効率よくPhotoshopを使うために知っておきたい便利機能 25 - NxWorld
主にこれからPhotoshopを使い始めようと思っているとか使い始めたばかりという人向けに、知っておくと便利な機能を紹介します。 ひとつひとつはちょっとしたことでも多用するのであれば覚えておくことでより効率よく作業することができますし、中には使いこなすことができれば大幅な作業時間の短縮に繋がるものもあります。 ここで紹介しているのは「Adobe Photoshop CC 2017」を使用した想定のものになります。 その他のバージョンを使用している場合は一部使用できない機能があったり、機能自体はあってもメニュー位置や設定方法などが若干異なっている可能性があります。 ショートカットを活用する 特定のキーでツールを選択状態にしてすぐ使えるようにしたり、メニューから選んで実行していくようなものを即座に実行できるようになど、Photoshopには様々なショートカットが用意されており、普段からよく利用
WordPress：「Advanced Custom Fields」の「関連」フィールドのカスタマイズ備忘録 - NxWorld
WordPressでカスタムフィールドを扱いやすくするプラグイン「Advanced Custom Fields」にある「関連」フィールドで、現在の記事を除外する、下書き・非公開記事の非表示、並び順を変えるなど、表示される記事内容をカスタマイズする際の備忘録です。 紹介する内容は「Advanced Custom Fields」を既に使用（有効化）している想定のものになります。 現在の投稿を除外する 新規投稿時には気になりませんが、デフォルトでは「関連」フィールド内に該当するすべての投稿が表示されるので、編集時などに現在編集している投稿も表示されます。 ほとんどの場合は現在の投稿を関連投稿として選択することはないと思うので非表示にします。 「関連」フィールド内の出力をカスタマイズしたい場合は、主にacf/fields/relationship/queryのフィルターフックを利用します。 実装に
CSSで装飾されたボタンを手軽に使いたいときに便利なボタンライブラリ 5 - NxWorld
特定のCSSを読み込み、適応したい要素にclass指定をするだけで簡単に装飾されたボタンを実装できるボタンライブラリを5つ紹介します。 カラーやサイズ指定をはじめ、中には20種類以上のデザインが用意されているものもあります。 そのまま利用させてもらうのはもちろん、特に中規模〜大規模サイトではボタンを共通コンポーネントのひとつとして用意することも多いと思うので、その際の参考にすることもできます。 Buttons 指定時の共通接頭辞は「button」 カラーは6色、サイズは6サイズ分用意されており、3D・ロングシャドウ・グローといったデザインタイプや角丸指定もできるようになっているボタンライブラリで、通常の見栄えだけでなくホバー時やクリック時の見栄えもカバーされています。 基本的には必要なCSSを読んで、適用したい要素に対して特定のclassを付与するだけですが、ドロップダウン使用時はjQue
slickのカレントクラスを利用した実装サンプル - NxWorld
手軽にカルーセルを実装できるjQueryプラグイン「slick」には、現在表示されているスライド（表示の仕方やオプションの指定によって付与の対象となる位置は変わります）に対して.slick-currentというclassが付与される作りになっており、これを利用することでCSSを少し追記するだけでもいろいろな見せ方が可能です。 そこで今回は手軽にできて且つ個人的にも利用することが多い実装サンプルを幾つかご紹介します。 slickの基本的な使い方や実装方法については下記でもサイトやGitHubで確認できるので省略します。 中央のスライド以外を透過させる slickで用意されているcenterModeを利用している想定で、中央のスライドは通常の見栄えで表示させ、それ以外（このサンプルの場合は左右のスライド）のものは少し透過されるというものです。 まず、HTMLとjQueryはそれぞれ下記のように
slickでスライド総数と現在何枚目が表示されているかをカウント表示する方法 - NxWorld
使い方次第で簡単に様々なタイプのカルーセルが実装でき、オプションやイベントも豊富に用意されているのが特徴のjQueryプラグイン「slick」で、スライド総数と現在何枚目が表示されているかをそれぞれカウント表示させるカスタマイズを紹介します。 slickの基本的な使い方や実装方法については下記でもサイトやGitHubで確認できるので省略します。 実装イメージはこのようになっており、現在のスライド数 / スライド総数という形でカウントを表示させます。（イメージは全10枚中5枚目を表示しているという状態） デフォルトで用意されているバレットとかでも全部で何枚あり現在何枚目を表示しているかはわかりますが、よりパッと見でわかるようにしたいときやデザイン的にこのような表示にしたいとき、あとはスマートフォンなど表示領域が狭い場合にバレットやサムネイルなどがごちゃごちゃ配置されているのをどうにかしたいと
ボタンにユニークなホバー・クリックエフェクトを付けたいときに参考になるエフェクトサンプル 10 - NxWorld
近年多くのサイトで採用されているパッと見がシンプルなボタンデザインでも、ホバーやクリックぐらいは少しユニークな感じにしたいと思ったときに参考になりそうなエフェクトを、CodePenで公開されている中から紹介します。 そのまま参考にさせてもらうだけでなく、さらに自分なりにアレンジを加えてみたり、あとは紹介しているものを組み合わせてみても面白いエフェクトができそうです。 紹介しているものはホバーやクリック時のエフェクトが主になるので確認はPC推奨です。 CSS-only super tilt button よく見るクリックすると押し込まれるような見た目になるボタンにさらに手を加えたタイプで、クリックした位置によって押し込まれる部分が変わります。 実装はすべてCSSでされており、具体的にはまずボタンの中に複数のspan要素を配置し、それぞれクリックされた際にテキストや背景の部分をCSSのtran
WordPress：テンプレートタグや関数などを外部で使用する方法 - NxWorld
主に独自のプログラムで書かれていて且つそれがWordPress外に設置されているファイルだけどWordPressのテンプレートタグや関数を使用したい、サイト全体をWordPress化するわけではないけどヘッダー・フッターなどの共通部分をテーマ内で使用しているものにしたいなど、WordPressのテンプレートタグや関数などを外部ファイルで使用したいときに使える方法です。 WordPress外でもテンプレートタグや関数などを使用したい場合は、下記のようにwp-load.phpを読むように記述することで使用可能になります。 /path/の部分は環境によって変更し、例えばルートディレクトリにWordPressとは関係ないファイルAとWordPressの各ファイルが格納されている/wpというディレクトリがあるとき、WordPress配下ではないファイルAでも下記を記述することでWordPressのテ
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
UIデザインの引き出しを増やしたいときや悩んだときに参考になるデザインギャラリー 20 - NxWorld
webサイトやアプリなどのUIデザインに悩んだときに参考になるデザインギャラリーを全20サイト紹介します。 よくあるコンポーネントのデザインや配置の仕方、カラーの組み合わせ方を眺めるだけでなく、ギャラリーによってはクールなものからユニークなものまである様々なアニメーションをまとめているところもあるので、デザイン以外の部分でも参考になるギャラリーもいくつかあります。 また、悩んだ・困ったときに見るだけでなく、お気に入りのギャラリーがあればブックマークやフィード登録などして普段から空いた時間に目を通すことでデザインの引き出しも増やせますね。 Calltoidea 細かいコンポーネントからページ全体のレベルまで様々なデザインがまとめられています。 カテゴリーを表すアイコンもわかりやすく参考デザインのキャプチャも大きくて見やすいので、個人的によく見るギャラリーサイトのひとつです。 Collect
gulp：とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル - NxWorld
主にこれからgulpを使い始めよう（使い始めた）という人向けに、とりあえず覚えておきたいよく利用するタスクの基本的な記述例やプラグイン・モジュールを使った使用例をいくつかまとめてみました。 実際に使用する時はここで紹介しているような簡易的なものでなく、もっと複雑なタスクだったり様々なプラグイン・モジュールを組み合わせたりすることがほとんどですが、ファイルの移動や削除をはじめ、リネーム・結合・圧縮・監視など基本となるような処理の記述方法や動きを知りたい人は参考にしてみてください。 gulpの基本的な使用方法（環境準備やインストールなど）については割愛しています。 また、以下はいずれもgulpfile.jsに記載した例になり、ファイル指定のディレクトリは/src、出力先のディレクトリは/publicという想定になります。 ここで紹介している内容は、gulp Ver 3.9.1を使用した場合にな
簡単に取り入れることができる、PSDのファイルサイズを減らす5つの方法 - NxWorld
Photoshopで使用するPSDファイルのサイズを少しでも減らしたいという時に使えるTipsを紹介します。 あまり目新しいものでもなく普段からPhotoshopをよく使っている人であれば当たり前な内容も多いと思いますが、逆に普段から特に気にしていなかったけどファイルサイズを減らしたいという人は、いずれも簡単に取り入れることができる内容なので是非試してみてください。 全グループ・レイヤーを非表示にする 保存する際にすべてのグループ・レイヤーを非表示にすることで簡単にファイルサイズを減らすことができます。 グループやレイヤーが多数ある場合は非表示にするのが少し面倒に感じますが、以下の方法を一緒に覚えておくと便利です。 レイヤーパネルにある表示アイコンをドラッグしていく グループやレイヤーの表示/非表示はレイヤーパネルにある表示アイコン（目のアイコン）をクリックして切り替えますが、これはわざわ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress：多言語サイト制作時に便利なプラグイン「Bogo」のカスタマイズ備忘録 - NxWorld
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld
