今更聞けない、デジタルマーケティングの基礎知識から、最新のアドテクまで、あなたに役立つ情報をご紹介します。 Webサイト制作はWebマーケティングの基本です。Webサイト制作では、ツールを利用することで効率化できる作業が多くあります。 今回は、ブックマークしておきたいWeb制作に役立つWebサイト・ツールを目的別・場面別でまとめました。 Web制作時に必要な素材やパーツを揃えるのに役立つツール、Webサイト 1.amCharts amChartsは、無料でFlashによるパイチャートや円グラフを作成できるツールです。Flashに関する知識がなくても使えるのが特徴です。 amChartsはグラフ化したいデータなどを設定ファイルに書いていく作業だけで簡単に見た目の優れたグラフを作成できます。 グラフの種類やデザインを調整でき、制作するWebサイトに合ったデザインのグラフを手軽に作りたい場合に役

「Responsive Image Breakpoints Generator」はレスポンシブデザイン用の画像を一括生成してくれるサイトです。レスポンシブデザインで画面サイズに応じて画像サイズも変更したいときにおすすめです。指定した画像を複数のサイズにリサイズしてくれ、一括でダウンロードできますよ。 以下に使ってみた様子を載せておきます。まずResponsive Image Breakpoints Generatorへアクセスしましょう。適用したい画像をアップロードします。ファイルサイズや大きさの設定を同時に行えますよ。 このような結果に。右側にファイルの大きさとファイルサイズの表があります。それぞれ画像を開いて確認できますよ。また、オリジナルサイズとの比較も図解されているので分かりやすいですね。図解の下にダウンロードリンクがありますので、リサイズされた画像を一括でダウンロードできます。ぜ

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

Webページ作成のベースになる、HTML5の必要最小限の構成にしたテンプレート、各ブラウザのスタイルを正常化・リセットするスタイルシート、レスポンシブ対応の柔軟なグリッドをつくるスタイルシート、さまざまなCSS3アニメーションを簡単に利用できるスタイルシートを紹介します。 HTML5で作成する時の必要最小限のテンプレート スタイルの正常化・リセット グリッドをつくるスタイルシート CSS3アニメーション HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低限の配

今年もCSSの進化がすごいです！ 次のプロジェクトに使ってみたくなるようなワクワクする素晴らしいアイデア満載のスタイルシートのテクニックを紹介します。 CSSアニメーションはより洗練され、単に要素を動かして楽しむだけでなく、意味のある動きとしてより効果的に利用されるものが目立ちました。 まずは、アニメーションの表現もここまでできるのかと驚いた「Marvel Logo animation」から。 ※一部は、実際に動作するデモのコードを埋め込んでいます（全部をコードにしたらページが重すぎました）。

ピッカピカのゴールド、つやつやのゴールド、ざらっとしたゴールド、延べ棒・金箔・砂金など、さまざまなゴールドの美しい質感をデザインに適用できる素材を紹介します。 通常は有料ですが今週末まで無料なので、この機会にダウンロードしておくのをオススメします。個人でも商用でもクライアントワークでも利用できます。

HTML、CSSの勉強法を以前書きました。 www.yukihy.com この記事を書いたあと、jQueryに挑戦をして、まだまだ完璧ではないものの実際にこのはてなブログを通して、いろんなブログパーツのようなものを作ることができました。 そこで、jQueryを勉強するとき、効率良く身につけられる方法を書いていきたいと思います。 僕自身いろんな本やツールに手を出しながら進めてきたので、実際に下の通りに行ったわけではありませんが、もう一度勉強しなおすとしたらこういったようにやるなといった感じです。 それではレッツゴー！ jQueryを身につけるための最短ステップ ステップ１　Progateで手を動かしながら学ぶ ステップ２　平行してWebデザインレシピの記事を読む ステップ３　ドットインストールで総復習&補完 ステップ４　書籍を参考に実際に作ってみる 作りながら学ぶjQueryデザインの教科書

作成：2015/10/5 更新：2017/04/16 Web制作 > 開発環境 スマートフォンサイト構築時のコーディングで気を付けたいポイントを次回コーディングの時のためにメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 全般 viewport デバイスを横向きにした時の処理一例です。 一般（ページ拡大表示）ピンチアウト/ピンチインOK。通常はこれを使うことが多い。 <meta name="viewport" content="width=device-width"> サイズを変更せず、ピンチアウト/ピンチインOK <meta name="viewport" content="width=device-width,initial-scale=1.0"> 2倍に拡大した状態でページ表示 <meta name="viewport" content="wi

2015年9月24日 便利ツール 巷ではgulpやGruntなどを使ったスタイルガイド生成ツールが多く存在します。しかし、CSSのコメントに書き込んだりするのはWeb制作者でないと難しい部分もありますし、そもそもファイルを作るのがめんどうだったり…と、なかなかスタイルガイドを作る気になれない人もいるんじゃないかと思います。今回は非Web制作者でも簡単にスタイルガイドが作れちゃうFrontify Style Guideを紹介します！ ↑私が10年以上利用している会計ソフト！ スタイルガイドとは？ Webサイトを一人で制作、運営している場合、そのサイトに必要な画像やロゴ、配色パターンなどはすべて自分が把握できているものです。しかしチームを組んで運営していく場合は、コーディング規約と同様、デザインのルールをひとつにまとめておくといいでしょう。そのルール集がスタイルガイドです。スタイルガイドを作る

レスポンシブ対応jQueryコード 1.スクロールすると現れて追尾するトップへ戻るボタン スクロールすると現れるページ上部へ戻るボタンです。よく見るやつですね。PC版ではスクロールするとふわっと画面右下に現れて追尾しますが、スマホ版（ウィンドウ幅480px以下）ではついてこられると鬱陶しいので画面最下部に固定しています。 まずは、ある程度スクロールするとフェードインして現れるjQueryコード。 <!-- jQuery --> <script> $(function(){ var pageTop = $("#pageTop"); pageTop.click(function () { $('body, html').animate({ scrollTop: 0 }, 300); return false; }); $(window).scroll(function () { if($(th

【2015年6月11日 追記】file_get_contents()の使い方に注意しよう 重要なことでしたので追記します。こちらの内容はコメントにて教えていただきました。教えていただかなかったら全く知らない事実でした…本当にありがとうございます！ file_get_contents()は「allow_url_fopen =off」のサーバー環境では動いてくれない APIを取得する際に使用しているfile_get_contents()というPHPの関数には注意が必要です。まず、その関数が動かない環境があるということ。file_get_contents()を使うにはサーバーの「allow_url_fopen」の設定をONにする必要があります。もし設定がOFFになっている場合はfile_get_contents()が使えません！ ONにする方法としては以下の記事がわかりやすくまとめてくれていまし

TOP  >  Design  >  フリーで使用できるpsdアイコンを集めた「Free PSD Icons: 800+ Icons for Designers」 非常に便利なツール・アイコン。さまざまな種類が配付されており、いろいろな種類を集めている方も多いのではないでしょうか？そんな中今回紹介するのは、フリーで使用できるpsdアイコンを集めた「Free PSD Icons: 800+ Icons for Designers」です。 Line icon set on Behance 定番タイプから、個性的なテーマで展開されたものまで、いろんな種類のアイコンが紹介されています。 詳しくは以下 Dribbble – Free Space Icons by Justas Galaburda 宇宙をテーマにしたアイコン。ポップなテイストが特徴ですね。可愛らしいデザインに合わせればより魅力的な作品

フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ

bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。 Restive.JS Restive.JS -GitHub 表示しているデバイスを自動検出し、bodyや各要素に任意に定義したブレイクポイントごとのclassを付与します。ブレイクポイントはピクセルと解像度、プラットフォームやデバイスの種類や向きの判別にも対応。

こんにちは。 今回はパララックスサイトの基本的な作り方を紹介したいと思います。 去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。 そんなパララックスサイトの基本的な作り方です。 パララックス（視差効果）とはパララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 準備をしよう！htmlを用意します。 jQueryはjQueryのサイトから直接読み込みます。 [html] [/html] スクロールした値を取得してみよう！スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。 html[html] スクロールの値を取得スクロールの値 | 0

こんにちは、エンジニアの段田です。 WordPressでテーマ作成やカスタマイズする際に便利なプラグインの紹介です。 元々WordPressでは、見ているページで使用されているテンプレートファイルや条件分岐タグの種類、実行されたSQLなどを確認できません。 ですが、この「Query Monitor」プラグインを導入すると確認することができます！ Query Monitorの導入方法 さっそく導入方法から見ていきましょう！ ダウンロード まずは「Query Monitor」をダウンロードしましょう。 https://wordpress.org/plugins/query-monitor/ もしくは管理画面のプラグイン新規追加画面にいきましょう。 インストール つぎに、インストールしましょう。 ファイルをダウンロードした方 ダウンロードしたらファイルを解凍し、pluginフォルダに設置する 管

グラフィックデザイナーがドキュメントをデザインするにあたって特に重要な要素を「Color(カラー)」「Contrast(コントラスト)」「Repetition(反復)」「Arrangement(アレンジ)」「Why(なぜ)」「Organization(組織化)」「Negative Space(ネガティブスペース)」「Typography(タイポグラフィ)」「Iconography(図像学)」「Photography(フォトグラフィ)」という10のカテゴリに分類し、各カテゴリに5つずつ、全部で50のルールを盛り込んだインフォグラフィックが「Color CRAYON-TIP」です。 The 50 Most Important Rules of Document Design: Color CRAYON-TIP Method http://thevisualcommunicationguy.co

WordPressを使ってサイトやブログを構築する際、例えば「一覧と詳細でサイドコンテンツを変えたい」とか「カテゴリーによって表示内容をガラッと変えたい」のように「○○の時に○○する」といったことをしたい場合に用いるのが条件分岐です。 WordPressには便利な条件分岐タグが沢山用意されており、それらを用いることで様々なことができるので、先述したように特定の条件で何か処理を行うカスタマイズをしたい方は参考にしてみてください。 条件分岐の使い方 条件分岐とは、簡単に説明すると「指定された条件に合うか・合わないかを判断し、判断に応じて処理を行う」というものになり、例えばWordPressの場合であればこれを利用することによって、同じテンプレートを使用していても条件に応じて全く違う見栄えにしたり、処理を行うといったことが可能です。 条件分岐にはswitch文というものもありますが、ここで紹介し

後々CSSを見たときに、ショートハンドしたい箇所って結構あるもんですよね。なるべくCSSを最少化したいそんな時「SHRTHND」で集中して変換してみてはいかがでしょうか。