【Webデザイン】Adobe XDで時短になる使うべき機能3選。 | ネクストページブログ
HOMEブログウェブ制作【Webデザイン】Adobe XDで時短になる使うべき機能3選。 | ネクストページブログ こんにちは、デザイナーのゆきじです！ WebデザインをXDで作る機会が多く、時短になると感じた機能があったので3つ紹介します。 アピアランスをペースト（Command(Ctrl)+Option(Alt)+V） オブジェクトやフォントの見た目（色やシャドウ、フォントのスタイルなど）を別のものに反映することができるのがアピアランスをペーストです。 やり方は、元となるオブジェクトやフォントをコピーして、適用したいものにアピアランスをペーストで反映されます。 図形のwidthやheight、長方形から丸にするなどは反映されないようですが、角丸などは反映されます。 カラーの登録 色を登録し、簡単にその色を呼び出すことができるものです。 カラーの登録は、オブジェクトを選択したときに右に表
「Stroly」を使って、オリジナルの地図に位置情報を表示させよう | ネクストページブログ
HOMEブログ「Stroly」を使って、オリジナルの地図に位置情報を表示させよう | ネクストページブログ こんにちは、西川です。 先日、「絵地図で歩く＆魅せる神戸ワークショップ」というイベントに参加してきました。 今回は、そのイベントで紹介していただいた地図サービス「Stroly（ストローリー）」についてご紹介したいと思います。 皆さんは普段、地図を活用されていますでしょうか？ パンフレットや旅行雑誌、街にある掲示板など、身の回りには地図がたくさんあります。 最近では、GoogleマップやYahoo!地図など、パソコンやスマホから簡単に地図を見ることができますね。 GoogleマップではGPSで自分が今いる位置も表示されるので、道を知りたいとき、迷ったときなどにとても便利ですが、 オリジナルで作成された地図にはGPSのような機能がないので、自分の居場所や目的地を考えて行動しなければいけま
年賀状で使える、筆ペンでユニークな文字が書ける方法！ | ネクストページライフ
HOMEブログ年賀状で使える、筆ペンでユニークな文字が書ける方法！ | ネクストページライフ こんにちは、ゆきじです。 皆さん、年賀状はもう出しましたか？ 今年の年賀状が元日に届く締め切りは終わりましたが、まだ年賀状は出せます！ プリントは出来ないし、どんな年賀状にしたら良いかわからない…とお悩みの方！ そんな方に、誰でも簡単に筆ペンでユニークな文字を書ける方法をご紹介いたします！ ※この作業をして年賀状が汚れてダメになってしまったなどの責任は負えませんのでご了承ください。 準備するもの 年賀状 汚れても良いポストカード マスキングテープ（仮止め用テープ） 筆ペン 毛筆タイプ 筆ペン 筆先がまとまったフェルトタイプ 今回は「あけましておめでとうございます」の文字を縦書きで書いていきます。 下準備 まず年賀状の上に1.5㎝幅のマスキングテープ（よくみるマステのサイズです）を2つ置いたぐらいの
Webデザインのランディングページを公開しました。 | ネクストページブログ
HOMEブログWebデザインのランディングページを公開しました。 | ネクストページブログ こんにちは、デザイナーのiuchiです。 突然ですが、先日Webデザインのランディングページを公開させていただきました。 Webサイトのお悩み、「デザイン」で解決します 弊社はhtmlコーディングやCMS構築だけでなく、デザインもバリバリこなしているのですが、実は今までサービス紹介ページにデザインに関するコンテンツが存在しませんでした。 デザイナーとしては「デザインもやっていることをもっとアピールしたい！」ということで、このランディングページの制作に至りました。 ランディングページとしては珍しく複数のページで成り立っており、ページ上部のボタンから他のページに遷移することができます。 （現在は2ページですが、後日新たなページを追加する予定です。） 左は「分かりやすいデザイン」、右は「個性的なデザイン」
2年目デザイナーの私が参考にしているブログ6選。 | ネクストページブログ
HOMEブログウェブ制作2年目デザイナーの私が参考にしているブログ6選。 | ネクストページブログ こんにちは、デザイナーのまっつんです。 今回は、Webデザイナーとして参考にしている、おすすめのブログをご紹介したいと思います。 1.PhosohopVIP 一番見ているブログです。 その年の流行や、フリーフォント、素材などデザインをする際に役立つ記事が多く公開されています。 デザインに入る前によくチェックします。 2.coliss こちらもサイト制作に関わる記事が多岐に渡り公開されています。 頻繁にフォントや素材プレゼント企画が実施されています！ 応募し損ねないようにTwitterでもチェックすることをおすすめします。 3.could デザインのルールや個人の意見を発信されており、デザインについて考えさせられることも。 記事内にイラストが挿入されていたりと読みやすく工夫されているます。 4
Photoshopのブラシやパターンなどのプリセットファイルを複数環境で同期する方法【Windows】。 | ネクストページブログ
HOMEブログウェブ制作Photoshopのブラシやパターンなどのプリセットファイルを複数環境で同期する方法【Windows】。 | ネクストページブログ こんにちは、iuchiです。 私は、ラフなイラストはWindowsのOSが搭載された液晶タブレット「Cintiq Companion」でPhotoshopを、きちんと仕上げるイラストはデスクトップPCでPhotoshopを使って描いています。 他にも「自宅と職場でPhotoshopを使っている」など、複数環境でPhotoshopを使っている方は多いのではないでしょうか。 そういう時、ブラシやパターンなどのプリセットファイルをどの環境でも自動的に同期するようにしていると、追加・削除が全環境に反映されるのでとっても便利です！ 今回はその方法をご紹介します。 1. クラウドストレージを用意する 以前のPhotoshop CCでは「設定を同期」
ScrollMagicを使った追従メニュー・追従サイドバーの実装例。 | ネクストページブログ
HOMEブログウェブ制作ScrollMagicを使った追従メニュー・追従サイドバーの実装例。 | ネクストページブログ こんにちは、アンドレです。 以前、ScrollMagicのパララックスサンプルを解説しましたが、やはり、「スクロールに応じて○○する」というのはよくあるご要望で、そういった際にScrollMagicはとても便利なライブラリです。 そこで今回は、ScrollMagicを使ってできることの一例として、ページの途中から追従するメニュー・サイドバーの実装例をご紹介したいと思います。 See the Pen 追従メニュー by Takamasa Okada (@NP-okada) on CodePen. コードと解説 var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({
IllustratorでWebデザイン！ デザインからスライスまで | ネクストページブログ
HOMEブログウェブ制作IllustratorでWebデザイン！ デザインからスライスまで | ネクストページブログ 気づけば、デザイナー5年目、講師2年目となりました、デザイナーの西川です。 最近、IllustratorでWebデザインをする人が増えてきたように感じます。今まではWebデザインといえばPhotoshopかFireworksが多かったですが、最近ではIllustratorもWebデザインに対応してきているようです。 というわけで、今回はIllustratorを使ってデザインからスライスまでの注意と手順を紹介したいと思います。 初期設定 IllustratorでWebデザインする前には必ず初期設定をしましょう。これを怠るとWeb用に画像を書き出す際に、画像のサイズが違ったり、にじんだりする他、コーディングするときの数値と合わなくなることにつながります。後から直すのがものすごく
slickを使ったスライドショーのカスタマイズ例3つ。 | ネクストページブログ
HOMEブログウェブ制作slickを使ったスライドショーのカスタマイズ例3つ。 | ネクストページブログ こんにちは、エンジニアのアンドレです。 最近案件でslickを使ってスライドショーのカスタマイズを3件ほど行ったのですが、その際に多少調べたり詰まったりしたので、備忘録も兼ねてこちらでご紹介したいと思います。 幅固定での中央寄せ 中央寄せ用に「centerMode」というオプションがあり、それを「true」にすれば幅可変の中央寄せは簡単にできます。 しかし、例えばPC表示でコンテンツ幅が決まっていて、その幅分を確保して中央寄せにしたい場合に、なかなかうまくいかずに苦労しました。 結論から言うと、オプション「variableWidth」に「true」を指定し、スライドさせる要素（下の例では「.item」）に固定幅を指定することで実現できました。 See the Pen 幅固定での中央寄せ
Web制作でよく使うjQueryプラグイン4選。 | ネクストページブログ
こんにちは。デザイナーのこばやし氏に影響されてすみっコぐらしにハマってしまったアンドレです（ちなみにねこ推し）。 さて、前回はjQueryのメソッドについてお話ししましたが、今回はweb制作でよくお世話になっている、jQueryのプラグインを4つご紹介します。 スライドショー slick 以前はbxSliderをよく使っていましたが、最近はslickを使っています。 変えた理由は大きくは2つです。 1つはbxSliderの場合、1ページ中に複数のスライダーを設置すると、bxSliderオブジェクトの挙動が変化し、制御しづらいことです。 もう1つは、よりレスポンシブに強いことです（responsiveオプションにbreakpoint等を含むオブジェクトを渡してやることで簡単に制御できます）。 Tips スライド化される際にdivやbutton要素が挿入されるため、各画像をul>liでマークア
Webデザインのソフトで出来ることできないこと。 | ネクストページブログ
HOMEブログウェブ制作Webデザインのソフトで出来ることできないこと。 | ネクストページブログ 今週のブログを担当する、デザイナーの西川です。 今年の4月から専門学校で週一日ですが、講師をすることになりました。 毎回、若者たちのパワーに負けないようにがんばっています。 また、ネクストページにも新人デザイナーが入社してきたこともあり、講師や先輩として、人に何かを教え、伝えるということが、とても難しいことを思い知らされています。 さて、弊社では、デザイン制作をする際、主にPhotoshopとFireworksを使っています。 元々は、スピードや操作性などからFireworksをメインに使ってきましたが、Fireworksの開発・更新が終了したこともあり、現在ではPhotoshopでの制作に移行しています。 学校の授業では、Photoshopを使ってWebデザインを教えていますが、 生徒から
PhotoshopでWebデザインをする際に知っていると便利なこと。 | ネクストページブログ
HOMEブログウェブ制作PhotoshopでWebデザインをする際に知っていると便利なこと。 | ネクストページブログ こんにちは、少しずつPhotoshopでのWebデザインに耐性がついてきたiuchiです。 以前「FireworksからPhotoshopへ移行するためにすること。」という記事を書きましたが、あれからいくつかPhotoshopでWebデザインをやってみて気づいたことや、調べていて便利だと思ったことを改めて纏めてみました。 ※作業環境：Photoshop CC 2015 カラー変更 テキストやパスのカラーを素早く変更する Alt+Delete：描画色に変更 Ctrl+Delete：背景色に変更 ただし、複数オブジェクトを一括で変更することは出来ないので、以下のスクリプトと併用します。 複数オブジェクトの色を変更（スクリプト） カラーピッカー（colorPicker.jsx）
これだけは知っておきたい！ IllustratorでのWebデザイン。 | ネクストページブログ
HOMEブログウェブ制作これだけは知っておきたい！ IllustratorでのWebデザイン。 | ネクストページブログ 今週のブログを担当します、デザイナーの西川です。 前回はPhotoshopを使用してWebデザインをするときのポイントをご紹介しました。 今回はIllustratorでWebデザインするときに、これだけは知っておきたいポイントをご紹介します。 これだけは知っておきたい！ PhotoshopでのWebデザイン Illustratorでデザインするメリット 文字やベクター画像がきれい 動作が安定 操作が直感的 ●画像、色、レイヤースタイルなど描画がきれい ベクター形式のソフトウェアなので、文字や図形などのベクターオブジェクトを綺麗に制作することができます。 ●動作が安定 長時間使用しているとフリーズしてしまうFireworksとは違い、動作が安定しています。 また、CCにな
「忘れてた！」をなくそう。Webサイト公開時に確認すること。 | ネクストページブログ
HOMEブログ「忘れてた！」をなくそう。Webサイト公開時に確認すること。 | ネクストページブログ こんにちは。ディレクターの藤木です。 気づけば入社５年目で、自分でもびっくり。 Webサイト公開直前になって「あ、これ忘れてた！」という経験、ありませんか？ 今までの経験から、Webサイト公開時に必要なこと・もの、確認すべきことをまとめましたので、ぜひ参考にしてください。 お客様はもちろん、ユーザーのためにもより快適にWebサイトを利用してもらえるよう、忘れないようにしましょう。もちろん、自分のためにも！ 基本的にディレクターはすべての項目を確認する必要がありますが、今回はデザイナー・エンジニアなど職種別の役割もわかるようにまとめました。デザイナーやエンジニアに前もって伝えておく事で、「あ、これ忘れてた！」をなくしましょう。 Webサイト公開時に必要なこと・もの一覧（もくじ） ディレクター
Google Analyticsで自サイトのアクセス数を調べる。 | ネクストページブログ
HOMEブログGoogle Analyticsで自サイトのアクセス数を調べる。 | ネクストページブログ こんにちは、ディレクターの藤木です。 最近、弊社のお客様も積極的にWebサイトの解析をされているように思います。 これからWeb担当をはじめる方に、ぜひ知っておいてもらいたいGoogleアナリティクス（以下、アナリティクス）の使い方。 「自社のWebサイトに、アナリティクスを導入してもらったはいいけど、とりあえず最初に何をどうすればいいの？」という方に、色んな方向からアクセス数を調べる方法をまとめました。 目次 ログイン方法とアナリティクストップの説明 Webサイト全体のアクセス数を調べる ページ個別のアクセス数を調べる ユーザーがどこから来ているかを調べる どんなキーワードでアクセスしているかを調べる 今、まさにページを閲覧しているユーザー数を調べる どんな端末で閲覧されているかを調
FireworksからPhotoshopへ移行するためにすること。 | ネクストページブログ
HOMEブログウェブ制作FireworksからPhotoshopへ移行するためにすること。 | ネクストページブログ こんにちは！ デザイナーのiuchiです。 2013年に開発終了が発表されたFireworksですが、大勢のFireworksユーザーは、他ツールへなかなか移行できずにいるのが現実ではないでしょうか。 SketchやIllustratorなど代替ソフトの候補は色々ありますが、やはり業界で一番スタンダードであろうPhotoshopは外せませんよね。 今回はFireworksユーザーが、PhotoshopでWebデザインをする際に知っておくと便利なTipsをまとめてみました。 ★前準備 CS6以前のユーザーはCCに移行する CS6以前と比べ、最近のPhotoshopはWebデザインをする為の機能が少しずつ追加され、以前より使いやすくなってきました。 グループにレイヤー効果を適用
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
イラスト制作で実際に使ったブラシの紹介。 | ネクストページブログ
エンジニア4年目がエンジニアを語ってみた。 | ネクストページブログ
Photoshop CCの便利な小ネタ5選。 | ネクストページブログ
レポートに使える！ 初心者向けの簡単便利なGoogleAnalystics機能3選。 | ネクストページブログ