サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
nxpg.net
HOMEブログウェブ制作【YQL終了対応】 クロスドメインでxmlファイルを取得したい。 | ネクストページブログ 西川です。 クロスドメインでajax通信するために、今まではxdomainajax.jsを使用。 が、年明けにサイトを見てみると、こんなエラーがコンソールに表示されている! Failed to load resource: net::ERR_NAME_NOT_RESOLVED ライブラリで使用されていたYQL(Yahoo Query Language)が2019/1/3にサービス終了してしまったようです… (「YQLは、米Yahoo! Developer Networkが提供している、ありとあらゆるWeb上のリソースにアクセスすることができるサービス」でした。ドメインも削除されている…XMLもJSONに変換してくれるので便利だったのに…) https://developer.
HOMEブログウェブ制作意外と知らないパターンや柄の名前。 | ネクストページブログ こんにちは。イラストレーターのこばやしです。 柄やパターンの名前がわからなくて困ったことがあるため、まとめてみました。 種類別に、フリー素材サイトと併せて紹介しています。 ※素材サイトにつきましては、著作権表示などの条件を確認してからご利用ください。
HOMEブログウェブ制作【Google fonts】おすすめの筆記体・手書きフォント 21選。 | ネクストページブログ こんにちは。デザイナーのカナイです。 最近仕事で筆記体や手書きフォントを使う機会がよくあり、 Google fontsを探していたところ、思いのほか様々なフォントがあることを知りました。 今回は、その中でも私がビビッときたものをまとめてみました! 21選というなんともキリの悪い数字になってしまいましたが…。 Google fontsについては、下記の記事に分かりやすく説明されてあります。 【2017年版】Google Fontsの使い方:初心者向けに解説! かわいい系 Pacifico 少し太めで丸みのあるポップなフォント。 Pacifico Courgette 女性らしさと落ち着きのあるフォント。 Courgette Damion 少しラフ感のあるオシャレなフォント。
HOMEブログウェブ制作2年目デザイナーの私が参考にしているブログ6選。 | ネクストページブログ こんにちは、デザイナーのまっつんです。 今回は、Webデザイナーとして参考にしている、おすすめのブログをご紹介したいと思います。 1.PhosohopVIP 一番見ているブログです。 その年の流行や、フリーフォント、素材などデザインをする際に役立つ記事が多く公開されています。 デザインに入る前によくチェックします。 2.coliss こちらもサイト制作に関わる記事が多岐に渡り公開されています。 頻繁にフォントや素材プレゼント企画が実施されています! 応募し損ねないようにTwitterでもチェックすることをおすすめします。 3.could デザインのルールや個人の意見を発信されており、デザインについて考えさせられることも。 記事内にイラストが挿入されていたりと読みやすく工夫されているます。 4
HOMEブログ360°VRカメラ用スタビライザーMOZA GURU 360°を使ってみた。 | ネクストページブログ 最近、プロ用カメラの価格も下がってきて、撮影環境がどんどん整っている360°VR動画。 日本の暑い夏こそ、外に飛び出して、360°動画を撮影しましょう! さて、今回は手振れから解放されるスタビライザー(ジンバル)、MOZA GURU 360° CAMERA STABILIZERを購入したので、テストしてみたいと思います。 開封からセッティング 届いたらこんな感じ。箱がパカパカしています。 本体と付属品一式です。本体でも充電できますが、別途充電器が付属しています。 セッティングするとこんな感じです。 サポートしているカメラはかなり多くて以下の通り。 Xiaomi MiJia 360° Spherical Panoramic Camera. Garmin Virb 360. Y
HOMEブログウェブ制作IllustratorでWebデザイン! デザインからスライスまで | ネクストページブログ 気づけば、デザイナー5年目、講師2年目となりました、デザイナーの西川です。 最近、IllustratorでWebデザインをする人が増えてきたように感じます。今まではWebデザインといえばPhotoshopかFireworksが多かったですが、最近ではIllustratorもWebデザインに対応してきているようです。 というわけで、今回はIllustratorを使ってデザインからスライスまでの注意と手順を紹介したいと思います。 初期設定 IllustratorでWebデザインする前には必ず初期設定をしましょう。これを怠るとWeb用に画像を書き出す際に、画像のサイズが違ったり、にじんだりする他、コーディングするときの数値と合わなくなることにつながります。後から直すのがものすごく
HOMEブログウェブ制作PhotoshopのビデオタイムラインでGIFアニメーションを作る。 | ネクストページブログ こんにちは。イラストレーターのこばやしです。 今回はPhotoshop CCのビデオタイムラインを使ったGIFアニメーションの作り方を紹介します。 ビデオタイムラインの基本の使い方 タイムラインウィンドウの表示 アニメーション時間の設定 目的の時間への移動 タイムラインのズームイン・ズームアウト キーフレームを使う タイムラインウィンドウの表示 「ウィンドウ」>「タイムライン」をクリックするとタイムラインウィンドウが表示されます。 タイムラインウィンドウの中にタブのボタンが表示されるので、「ビデオタイムラインを作成」を選択します。 アニメーション時間の設定 紫色のエリアの端にカーソルを持っていきドラッグすると下図のように時間を調整できます。 目的の時間への移動 時間が表示
HOMEブログPhotoshopを使って60分内で効率良くイラストを仕上げる。 | ネクストページブログ こんにちは!デザイナーのiuchiです。 最近、Twitter上の絵描きユーザーさんの間で「深夜の真剣お絵描き60分一本勝負」というタグが流行っています。 私も何度か参加したことがありますが、60分でイラストを描くのって、思ったよりも大変ですよね… そこで、今回はPhotoshopを使って60分内で効率良くイラストを仕上げるための方法をまとめてみました。 準備編 キーボードショートカットを覚える 「B」ブラシツール 「E」消しゴムツール 「Alt」押しっぱなしでスポイトツール 「Ctrl+T」変形・移動 は最低でも覚えておきましょう。 あとは「X」で描画色と背景色を入れ替えられるのも、覚えておくと何かと便利です。 Adobe Configuratorでよく使う機能をまとめておく(※CC
HOMEブログWordPressの投稿一覧からカスタムフィールドの絞り込み検索を追加するカスタマイズ。 | ネクストページブログ WordPressでの更新が増えてくると、管理画面を使用する時間も長くなります。 すると「こういった機能があると便利なのにな〜」と思うことも増えてくるのではないでしょうか。 今回は一番使用する機会の多い「投稿一覧画面」に、カスタムフィールドの検索機能を追加する方法を紹介します。WordPressでは主にタイトルと本文しか入力することができませんが、 カスタムフィールドを設定するとそれ以外の項目を公開できるようになります。 何も設定していない投稿一覧画面は下図のようになっています。 タイトルや本文、日付、更にはカテゴリーから絞り込み検索を行うことができます。 これでも十分に検索機能は充実しているのですが、カスタムフィールドの検索には対応していません。 試しにカスタ
HOMEブログPhotoshopでイラストをアニメ塗り風に仕上げてみよう。 | ネクストページブログ こんにちは、イラストの作業工程の中では仕上げが一番楽しいiuchiです。 今回は、Photoshopでイラストを描き始めたばかりのデジタルイラスト初心者向けに、なるべく簡単にアニメ塗り風に仕上げる方法をご紹介します。 イラスト作業に入る前に メニューの「編集」→「キーボードショートカット」の画面で、「イメージ」という項目の「>」をクリックして開きます。 「色の置き換え…」という項目をクリックして、自分が覚えやすいショートカットを設定してください(私はCtrl+.にしています)。 ショートカットが決まったOKで閉じてください。 線画と色分けレイヤーを用意する 線画を描いて、別のレイヤーに色分けします。ここまでは、なんとなくできますよね。 最近やっと涼しくなってきたので、秋っぽいイラストにして
こんにちは。デザイナーのまっつんです。 今回は、タイトルイメージの どことなくアメーバピグような「2頭身」のデフォルメした似顔絵の書き方と手順をご紹介したいと思います。 記事の最後には今回描いた似顔絵のベクターデータのDLリンクがありますので、ぜひご覧ください。 下描き編 1.写真を探す。 似顔絵を描きたい人の写真を探します。 顔のパーツなど特徴のつかみやすい写真を選ぶと良いです。 今回は、写真素材ぱくたそ様からおちょこを持った女性の写真をお借りしました。 メインの写真では全身の情報が分からないので、他の全身が移っている写真、持ち物が分かりやすい写真も参考にしました。 2.特徴的な部分を探す (1)で選んだ写真から似顔絵に反映していくために、特徴的な部分を探します。 デフォルメイラストを描くので、必要なところとそうでないところを分ける必要があります。 例えば先ほどの女性の写真からなら、 ・
HOMEブログウェブ制作slickを使ったスライドショーのカスタマイズ例3つ。 | ネクストページブログ こんにちは、エンジニアのアンドレです。 最近案件でslickを使ってスライドショーのカスタマイズを3件ほど行ったのですが、その際に多少調べたり詰まったりしたので、備忘録も兼ねてこちらでご紹介したいと思います。 幅固定での中央寄せ 中央寄せ用に「centerMode」というオプションがあり、それを「true」にすれば幅可変の中央寄せは簡単にできます。 しかし、例えばPC表示でコンテンツ幅が決まっていて、その幅分を確保して中央寄せにしたい場合に、なかなかうまくいかずに苦労しました。 結論から言うと、オプション「variableWidth」に「true」を指定し、スライドさせる要素(下の例では「.item」)に固定幅を指定することで実現できました。 See the Pen 幅固定での中央寄せ
こんにちは。デザイナーのこばやし氏に影響されてすみっコぐらしにハマってしまったアンドレです(ちなみにねこ推し)。 さて、前回はjQueryのメソッドについてお話ししましたが、今回はweb制作でよくお世話になっている、jQueryのプラグインを4つご紹介します。 スライドショー slick 以前はbxSliderをよく使っていましたが、最近はslickを使っています。 変えた理由は大きくは2つです。 1つはbxSliderの場合、1ページ中に複数のスライダーを設置すると、bxSliderオブジェクトの挙動が変化し、制御しづらいことです。 もう1つは、よりレスポンシブに強いことです(responsiveオプションにbreakpoint等を含むオブジェクトを渡してやることで簡単に制御できます)。 Tips スライド化される際にdivやbutton要素が挿入されるため、各画像をul>liでマークア
リストにしてみるとデザイナーを続けている人も多いですね。ただし、ほとんどの方が兼務で他の仕事をしています。 なぜ、歳をとってデザイナーだけしている人が少ないのか。 歳をとると家族が増えたり、将来への貯えが必要になり、お金が必要になります。会社はベテラン社員の給料を上げるために、部下を使って、より多くの仕事をしてもらったり、より付加価値の高い仕事に変わってもらう必要があります。つまり、出世してもらわないといけないわけですね。 そこで、デザイナーとして十分やっていける人でも、早く手を動かす仕事から離れて、ディレクションや管理業務をしてもらおうとするわけです。考えてみれば、もったいない話です。 また、よく言われるように、若い感性についていけなくなるという理由もあります。だいたい、現場のクリエーターとしてのピークは30代に来ることが多いように思います。ピークを過ぎると、だんだんデザインが古くなって
HOMEブログウェブ制作Instagram タイムライン埋め込み方法 | ネクストページブログ みなさんこんにちは! エンジニアのあずまです。 Instagram埋め込み方法は、Wordpressのプラグインや、SnapWidgetを使っても可能ですが、今回はInstagram APIを使ってタイムラインを埋め込む方法を紹介します。 ※SnapWidgetはタイムラインから、SnapWidgetで生成されたページにリンクするので注意が必要です。 Instagram APIについて Instagram APIは2016年6月1日に仕様が変更され、Instagram APIをフルに使うにはInstagramの承認が必要となりました。 しかし審査が相当厳しいため、今回はSandBoxモードという機能が制限された状態で実装します。 ※SandBoxモードはアプリケーション登録をすれば未承認でも使用
HOMEブログウェブ制作IE8対応のコーディングで気を付けるべき5つのこと。 | ネクストページブログ こんにちは。仕事中お菓子絶対食べるマンと化しているアンドレです。 最近はコーディング要件の対応ブラウザの最低がIE8となっていることが多いかと思います。 IE8は6や7と比べればクリティカルなバグが少なく、レイアウトで悩まされることはあまりないかと思うのですが、それでも厄介なバグは確かに存在します。 今日はIE8に仕掛けられた落とし穴についてお話しします。 imgにmax-width:100%を指定すると表示されないことがある レスポンシブ対応等でimgにmax-width:100%を指定する場合、基本的には問題ないのですが、floatの影響を受けていると、imgの幅と高さが0となって表示されないことがあります。 対処法 floatを指定している親要素もしくはimgに幅(autoでも可)
HOMEブログウェブ制作Webデザインのソフトで出来ることできないこと。 | ネクストページブログ 今週のブログを担当する、デザイナーの西川です。 今年の4月から専門学校で週一日ですが、講師をすることになりました。 毎回、若者たちのパワーに負けないようにがんばっています。 また、ネクストページにも新人デザイナーが入社してきたこともあり、講師や先輩として、人に何かを教え、伝えるということが、とても難しいことを思い知らされています。 さて、弊社では、デザイン制作をする際、主にPhotoshopとFireworksを使っています。 元々は、スピードや操作性などからFireworksをメインに使ってきましたが、Fireworksの開発・更新が終了したこともあり、現在ではPhotoshopでの制作に移行しています。 学校の授業では、Photoshopを使ってWebデザインを教えていますが、 生徒から
HOMEブログウェブ制作Illustratorで円形グラデーション・円形ストライプのフチを作る。 | ネクストページブログ
HOMEブログウェブ制作PhotoshopでWebデザインをする際に知っていると便利なこと。 | ネクストページブログ こんにちは、少しずつPhotoshopでのWebデザインに耐性がついてきたiuchiです。 以前「FireworksからPhotoshopへ移行するためにすること。」という記事を書きましたが、あれからいくつかPhotoshopでWebデザインをやってみて気づいたことや、調べていて便利だと思ったことを改めて纏めてみました。 ※作業環境:Photoshop CC 2015 カラー変更 テキストやパスのカラーを素早く変更する Alt+Delete:描画色に変更 Ctrl+Delete:背景色に変更 ただし、複数オブジェクトを一括で変更することは出来ないので、以下のスクリプトと併用します。 複数オブジェクトの色を変更(スクリプト) カラーピッカー(colorPicker.jsx)
HOMEブログウェブ制作これだけは知っておきたい! IllustratorでのWebデザイン。 | ネクストページブログ 今週のブログを担当します、デザイナーの西川です。 前回はPhotoshopを使用してWebデザインをするときのポイントをご紹介しました。 今回はIllustratorでWebデザインするときに、これだけは知っておきたいポイントをご紹介します。 これだけは知っておきたい! PhotoshopでのWebデザイン Illustratorでデザインするメリット 文字やベクター画像がきれい 動作が安定 操作が直感的 ●画像、色、レイヤースタイルなど描画がきれい ベクター形式のソフトウェアなので、文字や図形などのベクターオブジェクトを綺麗に制作することができます。 ●動作が安定 長時間使用しているとフリーズしてしまうFireworksとは違い、動作が安定しています。 また、CCにな
HOMEブログ初心者のためのプロ野球観戦講座。 | ネクストページライフ こんにちは! 三度の飯と同じくらい野球が大好き、かなゆーです。日々、阪神とオリックスに愛情を注いでいます。 ところで皆さんは、プロ野球観戦に球場へ足を運んだことはありますか? 「プロ野球観戦デビューしたいけど何準備したらいいの?」、「球場に行ってみたいけど野球のルールもあまり分からないし、楽しめるか不安」…そんな野球観戦初心者へ、プロ野球ファン歴10年のかなゆーが贈る、初心者のためのプロ野球観戦講座です。 1.これだけは知っていてほしい! 野球のルールと仕組み 当然ですが、ルールのわかる人、野球が好きな人(好きの度合いが高い方が良い)と一緒に行くことを強くおすすめします。 そして、野球観戦ビギナーの方でも、これだけは知っておいてほしいルール・プロ野球の仕組みをまとめました。 ぜひ、これを読んで観戦に臨んでください!
HOMEブログGoogle Analyticsで自サイトのアクセス数を調べる。 | ネクストページブログ こんにちは、ディレクターの藤木です。 最近、弊社のお客様も積極的にWebサイトの解析をされているように思います。 これからWeb担当をはじめる方に、ぜひ知っておいてもらいたいGoogleアナリティクス(以下、アナリティクス)の使い方。 「自社のWebサイトに、アナリティクスを導入してもらったはいいけど、とりあえず最初に何をどうすればいいの?」という方に、色んな方向からアクセス数を調べる方法をまとめました。 目次 ログイン方法とアナリティクストップの説明 Webサイト全体のアクセス数を調べる ページ個別のアクセス数を調べる ユーザーがどこから来ているかを調べる どんなキーワードでアクセスしているかを調べる 今、まさにページを閲覧しているユーザー数を調べる どんな端末で閲覧されているかを調
HOMEブログコンペに勝つプレゼン資料の作り方。 | ネクストページブログ こんにちは、藤中です。 私たちは、これまで数多くのコンペに参加してきました。会社設立から職人気質に仕事をしてきたため、プレゼンではなかなか勝てない日々が続きました。 幾度となく失敗を繰り返していく中、資料の作り方に工夫を加え、勝てるようになってきました。 まだまだ成果が出はじめたところですが、私たちなりの勝つためのプレゼン資料ノウハウを公開します。 今回は数百ページまでの中規模Webサイトの新規・リニューアル案件を想定しました。 内容を考えよう。 論理的に作ろう。 与件、ターゲットの整理をきちんと行いましょう。お客様の「なぜWebサイトを作りたい(リニューアルしたい)のか?」の「なぜ」をしっかり考え、その課題を解決する方法を企画にすることが基本中の基本です。 見えない課題を見つけ出そう。 与件を整理していく中で、そ
HOMEブログウェブ制作FireworksからPhotoshopへ移行するためにすること。 | ネクストページブログ こんにちは! デザイナーのiuchiです。 2013年に開発終了が発表されたFireworksですが、大勢のFireworksユーザーは、他ツールへなかなか移行できずにいるのが現実ではないでしょうか。 SketchやIllustratorなど代替ソフトの候補は色々ありますが、やはり業界で一番スタンダードであろうPhotoshopは外せませんよね。 今回はFireworksユーザーが、PhotoshopでWebデザインをする際に知っておくと便利なTipsをまとめてみました。 ★前準備 CS6以前のユーザーはCCに移行する CS6以前と比べ、最近のPhotoshopはWebデザインをする為の機能が少しずつ追加され、以前より使いやすくなってきました。 グループにレイヤー効果を適用
HOMEブログウェブ制作Photoshop CC 2014以降対応オリジナルパネルの作り方。 | ネクストページブログ こんにちは! デザイナーのiuchiです。 Photoshop CC以前のパネルはFlashベースで作られており、オリジナルパネルを作るにはAdobe Configuratorを使えば特別な知識の必要もなく、誰でも簡単に作成可能でした。 しかし、Photoshop CC 2014以降のパネルはhtmlベースに仕様が変わったため、 Adobe Configuratorでは作成できなくなり、作成に多少のhtmlとjsの知識が必要になりました。 今回はその方法をざっくりご紹介します。 ★Photoshop CC 2014の場合 1. Bracketsを導入する BracketsはAdobeが開発しているフリーのテキストエディタです。 こちらから、最新版をダウンロードしてインスト
HOMEブログ自動中割機能付きアニメーション制作ソフト「CACANi」を使ってみた。 | ネクストページブログ こんにちは、デザイナーのiuchiです。 今回は自動中割機能付きアニメーション制作ソフト「CACANi」を使ってみました! 中割とは、アニメーション制作で原画(動作の要となる絵)と原画の間の絵を描く作業の事です。 通常なら大量の絵を描くことになるのですが、それを自動化できるのであれば夢のような話です。 ただしこのソフト、中々曲者でして…使い方と一緒に説明していきます。 ダウンロード・インストール 「CACANi」はWindows用の有料ソフトです。 体験版もありますが保存ができないので、じっくり試したい人はライセンス(30日間15ドル~)を購入することになります。 ただし、先述したようにかなりクセのあるソフトなので、体験版を必ず触ってみてから購入を検討してください。 多分、合わな
HOMEブログ本を探すなら大型店舗? 都内の大型書店を比べてみました。 | ネクストページライフ こんにちは! 目玉焼きには醤油派、スライストマトにはウスターソース派のにしおです。 本(主に漫画)が大好きな私は、ほぼ毎週で家から一番近い書店に行きます。 ある日ふと、都内の大型書店にはたくさんの本がありますが、探すのが大変そう・・・ kindleなどで探せば一瞬で終わってしまうことですが、 実際来店して探すとどれくらい時間がかかるのか? など 調査してきました! 調査項目 東京駅からのアクセス 店舗が1階以上 品揃え 本の探しやすさ”Amazonのkindleストアでベストセラーになっている 「なぜ、この人と話をすると楽になるのか 著:吉田 尚記」を探します。 ブックカバーの装丁 などに絞り、都内5店舗を調査してみました! 日本橋 丸善 銀座にありそうな建物です。 展覧会やワークショップイベ
HOMEブログIllustratorでの手書きイラストの描き方。 | ネクストページブログ こんにちは。イラストレーターのこばやしです。 四角や丸で作られたカッチリしたイラストとは違い、手書きイラストは見る人に柔らかさやかわいさを感じてもらえます。 手書きイラストの作り方はさまざまですが、今回は変形や編集が楽なベクターデータでの作り方をご紹介します。 Illustratorの古いバージョンでも使える機能、ライブペイントやオブジェクトの再配色などを使った簡単な描き方ですので、CCをまだ持っていないという方でも実践できます!(私がCCを持っていません…) 目次 下絵を配置する 主線を描く ライブペイントを作成する 【補足】ライブペイント作成前に戻したい場合 【補足】ライブペイントをうまく作成できない場合 「ライブペイントツール(K)」で色を塗る 完成 1.下絵を配置する スキャンした下絵をトレ
HOMEブログウェブ制作カンタン・便利! ScrollMagicのパララックスサンプルを解説。 | ネクストページブログ こんにちは。最近ムーミンの愛らしさに魅せられまくっているアンドレです。 さて、一時のブームは過ぎたとはいえ、見せ方としてまだまだパララックスの需要というのは多いかと思います。 僕もとりあえず簡単に実装してみたいと思い、良さそうなライブラリを探していたところ、ScrollMagicというライブラリの存在を知りました。 豊富なサンプルがありどれも良くできていますが、今回はその中でも当初の目的であるパララックスのサンプルに絞って解説したいと思います。 ちなみにサンプルは基本的にPCを対象としていますので、PCでご覧ください。 ScrollMagicとは スクロールイベントの発火地点やその長さ、さらには動き等まで指定できるライブラリです。 バージョン2になってからは、jQuer
次のページ
このページを最初にブックマークしてみませんか?
『神戸・大阪・東京 中央区・京都でWeb制作・ホームページ制作を行う株式会社ネクス...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く