デザイン制作が捗る、個人的におすすめなAdobe XDの便利プラグイン 20 - NxWorld
デフォルトでも便利な機能が多数用意されており且つ定期的にアップデートも行われているAdobe XDですが、プラグインを利用することでより効率よくデザイン制作を進めることができます。 そこで、今回は便利なプラグインが数多く公開されている中でも個人的に特におすすめなプラグインを紹介します。 エントリー内では基本的にMacで使用した場合の見栄え・メニュー・ショートカットで紹介していますが、Winでもそこまで大きな違いはないので適宜置き換えてください。 プラグイン紹介時のキャプチャや挙動については、このエントリー公開時点のものになります。 プラグインのインストール・アンインストール・実行について インストール プラグインのインストールは、公式のものであればアプリから簡単にインストールができます。 イメージ内①のようにサイドにあるプラグインアイコンをクリック後に表示されるメニューの右上にあるプラスア
WordPress：Gutenbergをカスタム投稿で有効化する方法／有効化されないときの確認ポイント - NxWorld
WordPressでGutenbergをカスタム投稿で有効化する方法とGutenbergがカスタム投稿で有効化されないときの確認ポイントを紹介します。 以下で紹介している方法は、WordPress Ver 5.0.0で確認等行ったものです。 カスタム投稿を実装する際、とりあえず用意する程度であればfunctions.phpに下記のような記述で実装できます。 add_action( 'init', 'create_post_type' ); function create_post_type() { register_post_type( 'news', array( 'labels' => array( 'name' => __( 'News' ), 'singular_name' => __( 'News' ) ), 'public' => true, 'has_archive' =>
デザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則 - NxWorld
webサイト・アプリ・雑誌・チラシなど媒体は問わず、見やすくて内容が伝わりやすいデザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則を紹介します。 近接 - PROXIMITY 関係性の近い各要素の距離を近づけて配置することで位置的にそれらが関係があるものと認識され、見ている人に理解されやすいデザイン・レイアウトを作ることができます。 その際、近接を上手く活用したいときに気を付けたいポイントは余白で、何となくでつけるのではなく関係性があるものとそうでないものでそれぞれ異なる余白にすることです。 上のイメージは様々なスポーツのボールイメージと競技名を並べたものですが、近接が考慮されていないためにそれぞれどのボールがどの競技なのかがわかりづらい印象があります。 これを近接を意識して配置し直したのが下のイメージで、関係性がわかりやすくなり上のイメージに比べてどのボールがどの競技
WordPressで更新者が少しでも使いやすい・更新しやすいと感じてくれる管理画面をつくるヒントやカスタマイズ - NxWorld
個人的に普段から対応することが多いものを中心に、更新者（クライアント）が少しでも使いやすい・更新しやすいと感じてくれるようなWordPressの管理画面をつくるためのヒントやカスタマイズを紹介します。 サイト構成や更新者のスキルなどにもよると思うので全部が全部やるべきということでもないですが、紹介しているものをいくつか組み合わせるだけで不要なものはすべて取り除いたシンプルな管理画面にできたり、少し手を加えるだけでもデフォルトに比べて大幅に使いやすくすることも可能です。 管理画面に任意のCSSやJavaScriptを適用する CSSであればフロントのデザインに近い感じで管理画面を装飾したりデフォルトのレイアウトを使いやすい形に調整するなど、JavaScriptであればデフォルトにはない動きをちょっと付けたり逆にデフォルトで実装されている動きを無効化するといったように、管理画面をカスタマイズす
Flexboxを利用してよくあるレイアウトを実装したサンプル集 - NxWorld
一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなHTML・CSSで実装できるレイアウトが増えました。 そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。 紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記してください。 基本的に各実装に必要なFlexbox関連の最小限のコードのみ紹介していますが、サンプルによってはわざわざ初期値（flex-wrapやalign-itemsなど）を指定している場合があります。 それらは挙動を把握しやすくするために記述されているものなので、不要であれば記述する必要はありません。 表示確認のデモはPCでの閲覧推奨です。 要素を両端に寄せる 特にヘッダーやフッターで利用
Photoshopの作業効率を上げるために覚えておきたいショートカット - NxWorld
最近ではXDやSketchを使う人を目にすることも多いですが、まだまだデザインカンプをはじめ、使っている人も多いと思うPhotoshopで覚えておきたい便利なショートカットを紹介します。 基本的なものが中心なので、デザイナーでバリバリ使用しているという人よりも、全体的に普段はデベロッパーでたまに触ることがあるぐらいの人やこれからPhotoshopを使い始めたい人向けです。 全部を一度に覚えるのは難しいかと思いますが、普段よく使う操作や機能を少し覚えておくだけでも、Photoshopを使った作業の効率アップに繋がると思います。 ここで紹介しているのは「Adobe Photoshop CC 2017」を使用した想定のものになり、バージョンによっては紹介している動きと異なる場合があります。 USキーボードを使用している場合、紹介しているものをそのまま使用できない場合があります。 その場合は、Ph
デザイン制作を助けてくれる国内外の素材サイトまとめ - NxWorld
見つけてはメモしていたものがかなり増えてきて自分用に整理したのでシェアします。 ベクター・ラスター・テクスチャ・パターン・アイコン・フォント・モックアップなど、デザイン制作をする際に便利な素材を配布しているサイトの一覧です。 中には条件付きで使用可能とか商用利用時は有償という素材が中心に配布されているところもありはしますが、紹介しているのは基本的にフリーで使用できるものが中心または多く配布されているサイトになります。 以下はいずれも五十音 → アルファベット → 数字の順で紹介しています。 また、下記目次に属する国内の素材サイトについては多くが「禁止事項を守れば個人・商用問わず利用可能で、クレジット表記や報告等も不要」になるので、基本的にそのようなライセンスに関する情報は別途記載しているもの以外は省略しています。 国内 - 全般・ベクター・ラスター 国内 - テクスチャ・パターン 国内 -
サイト制作のスタイル設定を効率的に行うことができるリセットCSSとノーマライズCSSのまとめ - NxWorld
ブラウザ毎に設定されているデフォルトスタイルの差異をなくし、サイト制作のスタイル設定を効率的に行うことができるリセットCSSやノーマライズCSSを紹介します。 すべてを完全にリセットしてしまうものもあれば、リセットは一部にして有用なスタイルは保持するものもあったりと様々なタイプがあるので、自分の癖やプロジェクトガイドラインに合わせて選ぶこともできると思います。 普段からweb制作に携わっているならご存知の方も多いように、webサイトを閲覧する際に使用されるブラウザは様々な種類がありますが、各種HTML要素にはブラウザによってそれぞれ異なるスタイルがデフォルトとして定義されています。 そういったブラウザ毎のスタイルの差異をなくしてサイト制作時のスタイル設定を効率的に行うのに便利なのがリセットCSSとノーマライズCSSで、個人的に以前（といってももう割と前ですが）はとにかく様々な要素のスタイル
Sass(SCSS)のmixinを使って、Media Queries（メディアクエリ）を使いやすくするスニペット - NxWorld
ブレイクポイントや使用回数が増えるに連れてどんどん管理などが面倒になってくるMedia Queries（メディアクエリ）を、Sassのmixinを使って利用しやすく且つ管理もしやすいようにしたスニペットを紹介します。 ここで紹介する以外にも方法はあるとは思いますが、個人的に過去に使っていたとか普段から使っているものを3パターン紹介します。 条件分岐を使う ひとつ目は条件分岐を使ってひとつずつブレイクポイントを指定したものです。 ブレイクポイントの追加をしたい場合は同じように条件分岐を追記し、逆に不要なものがあれば該当の条件分岐を消せば変更できます。 また、各ブレイクポイントは数値での指定ではなく「small」や「large」という形でそれぞれ用意しており、使用時はこれらを引数に指定します。 こうしておくことで後で数値を変更することになった場合でも、mixin内で記述している数値部分のみ変更
Flexboxベースのレイアウトを実装できるCSSフレームワークまとめ - NxWorld
レイアウト（特にグリッドレイアウト）を作っていく上で、Flexboxを利用して且つ手軽に実装したいというときに便利なCSSフレームワークを紹介します。 Bootstrapのようにレイアウトに限らず様々なコンポーネントまで用意されているものもあれば、Flexboxを使ったグリッドレイアウトの実装のみに特化したシンプルなものまでいろいろありますが、全体的に適用したい箇所にクラスを付与するだけと簡単に利用できるものになります。 Bootstrap いまや定番といえるCSSフレームワークのひとつでご存知の方も多いBootstrapは、バージョン4からFlexboxを用いたグリッドシステムが利用できるようになりました。 使用方法も下記にあるようにこれまでのグリッドシステムを使用するときと同じような感じで使えるので、今までBootstrapを利用してきた人であれば尚更楽に導入できると思います。 また、
各項目を選択・入力するだけでgulpで使用するソースを出力してくれるジェネレータ「gulp generator」 - NxWorld
「gulp generator」はgulpで使用するgulpfile.jsとpackage.jsonに記述するソースを出力してくれるジェネレータで、用意されている各項目を選択したりファイルの読み込み・出力箇所を入力していくだけで簡単に必要なソースを出力してくれます。 サイトにアクセスすると上のイメージのような見栄えになっており、ページ左側で実行したいタスクを選択したりファイルの読み込み・出力箇所を入力して、その結果としてページ右側にgulpfile.jsとpackage.jsonに記述するためのソースが出力されるようになっています。 タスクの選択部分は大きく分けて「css」「js」「html」「その他」の4つに分類されており、上のイメージ（イメージは「css」を選択時）のようにそれぞれファイルのパス指定をする部分と各タスクを選択する項目が用意されています。 よく利用されると思うようなものは
gulp：とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル - NxWorld
主にこれからgulpを使い始めよう（使い始めた）という人向けに、とりあえず覚えておきたいよく利用するタスクの基本的な記述例やプラグイン・モジュールを使った使用例をいくつかまとめてみました。 実際に使用する時はここで紹介しているような簡易的なものでなく、もっと複雑なタスクだったり様々なプラグイン・モジュールを組み合わせたりすることがほとんどですが、ファイルの移動や削除をはじめ、リネーム・結合・圧縮・監視など基本となるような処理の記述方法や動きを知りたい人は参考にしてみてください。 gulpの基本的な使用方法（環境準備やインストールなど）については割愛しています。 また、以下はいずれもgulpfile.jsに記載した例になり、ファイル指定のディレクトリは/src、出力先のディレクトリは/publicという想定になります。 ここで紹介している内容は、gulp Ver 3.9.1を使用した場合にな
CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 - NxWorld
特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置してwidth:100%;とheight:auto;辺りを指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。 背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画像（背景画像）を表示させたいときは以下の方法で実装することができます。 実装には背景画像を表示したい部分に下記のようなCSSを記述することで縦横比を維持しつつ横幅いっぱいに背景画像を表示させることができ、以下のサンプルは表示させたい画像が「横幅：1000px 高さ：300px」の画像だった場合のものになります。 .background { width: 100%; height: 0; paddin
CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10 - NxWorld
画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。 以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。 共通のHTML・CSS サンプルで使用しているHTMLとCSSは下記をベースとして使用しています。 スタイルの中には幅や高さを指定している部分やラインの色を指定している部分などあるので、紹介しているものを使用する場合はこれらを自身の環境に合わせて調整してください。 <button class="menu-trigger"> <span></span> <span></span> <span></span> </button> .menu-trigger, .menu-trigger span { dis
webサイト制作や勉強をする際に役立つ便利なツール・サイトまとめ 100＋ - NxWorld
画像の軽量化やコード圧縮といったツールをはじめ、各種リファレンスサイト、利用している人が多いエディタやデザインツールのショートカット一覧など、web制作時に便利だと思うツール・サイト・チートシートを自分のブックマークがかなり乱雑化してきたのでその整理も兼ねて一気にまとめてみました。 もちろん他にもこういった便利なものは沢山ありますし、自分も普段からここで紹介しているもの全てを利用しているというわけではないのですが、こういったものを利用することで人によっては大幅に制作時間を減らすこともできると思います。 また、覚えておくとど忘れした時に容易に確認等もできたり、勉強時の参考にすることができるものもあります。 September 01, 2020 更新 リンク切れサイトを削除しました。（100サイト以下に縮小しました...。） January 16, 2016 追記 新たに5サイトを追加して10
Flexboxについて勉強したい・理解を深めたいときに参考になるエントリーやサイトまとめ - NxWorld
特に自分がそのように思っていたのですが、Flexboxはレイアウトを組む際に非常に便利なものではあるのですが、非対応のブラウザをサポートする必要があるために安易に使用できなかったり、仕様がころころ変わって対応してたとしてもブラウザによって様々な書き方をする必要があったりで、本格的に使うのはまだしばらく先にとかもう少し様子を見ようと思ってた人も少なくないと思います。 ただ、最近では以前に比べて記述する内容も減り、対応していなかったブラウザもサポートを切る機会が多くなったりと今後ますます利用する場面が増えそうなので、先述したようにFlexboxについて勉強したい方やより理解を深めたいという時に参考になると思うエントリーやサイトをまとめてみました。 全体的に英語のエントリーなどが少し目立ちますが、Google翻訳などを使えば大体の内容は理解できると思います。 November 16, 2017
メガメニュー・メガドロップメニューを実装しているwebデザインのショーケース - NxWorld
情報量が多いサイトで特に見かけることが多い、メガメニュー・メガドロップメニューを実装しているwebデザインのまとめです。 メガメニュー・メガドロップメニューとは表示面積が広いドロップダウンメニューのことで、上手く利用すればスペースを有効活用して、ユーザーが目的のページまで容易に辿り着けるようなナビゲーションを実装することができます。 ホバー展開するもの、クリック展開するもの、テキストのみを使用したもの、わかりやすい画像・アイコンを用いたものなど、同じメガメニューでも様々な表示方法やデザインがあるので、自分がこういった動きやデザインをしたいときに参考にさせてもらえそうなwebデザインを備忘録兼ねてまとめました。 紹介しているサイトのキャプチャは、それぞれホバーしてもらうとメガメニュー表示時のデザインに切り替わります。 ページ左上のロゴ下にあるカテゴリーにホバーすると各カテゴリーが表示され、更
見やすく綺麗なPSDをつくるためのポイントや覚えておきたい便利機能 10 - NxWorld
自分が普段からどちらかといえばデザインよりもコーディングなどの作業が多いので、中にはただのコーダー側の意見や愚痴っぽいのもあるかもしれませんが、Photoshopでデザインする際に見やすく綺麗なPSDにすることができると思うポイントや知っておくと便利だと思う機能をいくつかあげてみました。 最近だと特にレスポンシブが関連してIllustratorやSketchを使ってるという人も多いとは思いますが、デザイン制作時にPhotoshopを愛用しているという方は参考にしてみてください :) あくまで個人的に思ったことなので、バリバリのデザイナーさんとかで「もっとこうしたら良くなるよ！」とか「それはしない方が良いのに...」みたいな意見があればアドバイスやツッコミ大歓迎です。 ここで紹介している内容やキャプチャは「Adobe Photoshop CC 2017」を使用した想定のものになり、バージョン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Page Not Found - NxWorld
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld
