2018年3月15日 Webデザイン, XD デザインやプロトタイプを作成できるAdobe XD。みなさん使っていますか？先日アップデートもされ、Photoshopとの連携がより簡単になったり、Sketchファイルも扱えるようになるなど、進化が進んでいますね。これまではWebサイトのデザインにはPhotoshopが多く使われてきましたが、これからはXDが主力となっていきそうな予感。ということでAdobe XDを使ったWebデザインの手順を紹介します！ ↑私が10年以上利用している会計ソフト！ 今回作成するもの このように簡単なホームページと問い合わせフォーム用のモーダルウィンドウの画面を作ります。プロトタイプ機能で画面推移のアニメーションも加えてみましょう！ 1. 画面の作成準備 Adobe XDを立ち上げ、Web用の画面を1280×800のサイズで新規作成します。「portfolio」と

「ブログの文章や画像をパクったサイトを作られた！ しかもググったら私のブログより上に出てくる！」といった話を見聞きするようになった。 細々とブログを運営している私には対岸の火事と思っていたのだが、先日、私のブログもパクリ被害を受けた。そこで泣き寝入りせず、逃げ得させない方針で対抗し、ある程度、成功を収めたので、個人情報などはぼかしつつ、その経験を共有したい。 ———————————————————————————————————— 私がパクリに気付いたのは、外出先で自分の記事を確認しようと、最新の記事タイトルで検索した時のこと。検索一覧で、自分のブログのすぐ下に、見慣れない名前のサイトが現れたのだ。「たまたま同じタイトルの記事を書いた人がいるのかな？」と確認すると、文章も画像も私のブログとまったく同じ。 「パクられてる・・・」 血の気が引いた。パクリサイトを詳しく見ると、なぜか記事の筆者と

※2016/10/23 追記 こんにちは。 ここしばらく書いた記事が、皆様のお陰で３連続ホットエントリー＆100B!超えすることが出来ました。せっかく書いた文章なので、たくさんの人に読んでもらえ、ブロガー冥利につきます。 また、お小遣い稼ぎに設置しておいた広告が、ここ２ヶ月間で合計10万円以上の収益を産んでくれました。収益を目的にしたブログではありませんので、ガッツリ稼ぐことを目的とされている方々から見られると、微々たる金額だと思います。ただ、下記投稿で、hitode様もおっしゃられていたように、ページビュー(以下PV)と同様に、『収益』は何かを書くのにあたって大きなモチベーションになります。 『収益』というとハードルが高そうに思われるかもしれませんが、はてなブログは無料のコースでも、１日100PVくらいあれば月に1000円程度の収益にはなります。この金額をどう捉えるかは人次第ですが、足元

最近インターネット上でちょくちょく「SSL」や「HTTPS」という文字を見かけませんか？ 特によく見かけるのは「SSLへの移行」「常時SSL」などの言葉で、このように思っている方も、たくさんおられるのではないでしょうか？ SSLって何…？どうして対応しないといけないの？正直分からないし難しそう…。 対応しないとGoogleからペナルティを受ける？何だか分からないけど怖い。 SSLは分かるんだけど、移行のやり方が分からない。 移行の必要性を、どうやってクライアントさんや上司に説明したらいいだろう？？ 対応は出来ている！…はず。何か対応漏れが無ければいいが…。 出来るだけ安く移行するにはどうしたらいいだろう？ このように、SSLに関する疑問・悩みはたくさんあります。 しかしSSLを理解し、移行作業を進めるには専門的な知識が必要なため、ウェブデザイナーさんや自社のウェブサイト管理者さんにとっては

配色を決めるのは難しい ブロガーの皆さんはカスタマイズをとかすると思うんですが、配色ってどうやって決めていますか？いい感じの色使いって難しいんですよね。そういう仕事してるぼくでさえ、悩むポイント。ちょっと苦手です。 今日紹介するのは配色ツール。 このブログの場合は自分の好きな色でまとめた感じなんですけど、やはり見やすい色の組み合わせってあるので、好きな色をいくつも入れたら見た目がド派手になってしまった！なんてことも起こりがち。 そういうのを一気に解決してくれるやつを紹介します！ AI（人工知能）です！未来ですね。 しかも無料！（素晴らしい） Khromaっていいます！！（読めねーよ！） Khroma – The AI color tool for designers 使い方はとても簡単 サイトを開いて【Personalize】をクリック するとカラーパレットがズラッと出てくるので好きな色を

可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を

これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2

コーディング　Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。 一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。 このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ 手書き風の見出しデザイン[01] このデザインのポイントは「border-radi

SVGフィルターを活用すると、Photoshopで加工しなくてもWebサイトのトップページで使えるバナー画像が作れます。覚えておくと便利なテクニックです。 先日、WordPressのeコマーステーマをリリースしたところ、バナー画像に使っている「ぼかしで覆うエフェクト」に関する質問がたくさん寄せられました。ぼかしで覆うエフェクトはどんな画像にでも動的に適用できる注目のエフェクトで、優れた画像処理方法だと考えています。さらに重要なことは、汎用的なテクニックなのでデザイナーにとって使い勝手がいいということです。この記事では私が学んだことを手短に紹介しましょう。 上のバナーの「ぼかしで覆うエフェクト」について簡単に説明します。 単一の画像として使用 非破壊的（non-destructive）である（オリジナルのJPEG・PNG画像に直接変更を加えていない） 画像にテキストを追加でき、テキストによっ

今日からはじめるGitHub ～ 初心者がGitをインストールして、プルリクできるようになるまでを解説 エンジニアであれば、チーム開発ではもちろんのこと、個人開発でもGitを用いてバージョン管理していきたいもの。今回は、GitやGitHubをはじめて使う人に向けて、導入から初歩的な使い方までを解説します。 ソースコードの管理はできていますか？ ファイルを修正するときに、修正前のソースコードをhoge.php.bakのようなバックアップファイルとして残し、開発環境をゴミだらけにしていませんか？ エンジニアであれば、チーム開発ではもちろんのこと、個人開発でもGitを用いてバージョン管理していきたいもの。今回は、GitやGitHubをはじめて使う人に向けて、導入から初歩的な使い方までを解説します。 ここではGitの詳細な仕組みには触れません。GitやGitHubを利用したことのない人が、Gitを

Easily find the best Material color for your projects. Here is 30 color combination based on material design color palette. By clicking color sample bar, You can check usage example in material design UI. Each of color combinations consists of following three kinds of colors. (1) Main (2) Optional (3) Accent For details, see Google Guideline. Contents

自分のブログ記事がほぼ丸々コピーされているという経験はないでしょうか。丸々ではなくても、一部の文章をコピーしてまとめるキュレーションメディアというものが数多くあります。有名なのだと「NAVERまとめ」「MERY」「UpIn」などがありますね。 時間をかけて書いたブログ記事が、いとも簡単にコピーして自分のコンテンツであるかのようにアップされるのは気分が良いものではありません。「引用」という言葉を使っていますが、引用と言えない単なるコピーも多いのです。またコピーコンテンツがオリジナルコンテンツのページよりも検索結果が上に来ることもあり、もしコピーされて自分の記事が不利な状態であれば対策をしなくてはなりません。 コピー対策のために右クリックを禁止しているサイトもありますが、その方法ではSNSで拡散されにくくなるというデメリットもあります。しかしながら、自分の記事がコピーされたかを知るのは難しいも

ユーザー管理（アカウント・プロパティ・ビュー）と４つの権限について正しく理解しよう2017-05-30 11:00こんにちは、小川卓です。 Google アナリティクスでは様々な粒度での権限設定を行うことができます。設定されている権限によって表示される内容や出来ることが大きく変わってきます。権限に関して正しく理解をして、適切な設定を心がけましょう。 訪問の「コンバージョンしそうな可能性」を見ることができる「セッションの品質」を紐解く2017-04-27 11:00こんにちは、小川卓です。 Google アナリティクスに最近追加されたレポート（まだベータ版ではありますが）の１つに「セッションの品質」というレポートがあります。セッションの品質はどういう仕様なのか？どのように活用できるのか。筆者確認した範囲での気付きを共有いたします。 ニーズ調査だけじゃない！「サイト内検索」を改善に活用するため

人気の秘密を探る この記事では人気のウェブメディアがどのような戦略・デザインでユーザーを集めているのかを分析します。対象は月間PV数が300万PV以上のメディア。それほどに読まれる仕掛けはどこにあるのでしょうか。

って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C

2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジー、ファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基本的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表！確認しておきたいポイントとは？ 2017年のWebデザインはどうなる？

【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・

ポジ熊です。 今回は当サイトが2015/10/12の開設～2017/1/15現在までにAdsenseで どれだけの収益を上げたのか？ 収益の高い場所・広告サイズは？ 現在の配置場所は？ 収益が大きく増えた要因は？ 利用する上で便利なシステムやアプリは？ などについて公開します。 Adsenseでの確認方法 総収益 収益の高い場所と広告配置 特徴 考察と補足 収益が大きく増えた要因 考察 利用する上で便利なシステム 自動挿入 広告不要 収益確認アプリ Adsense収益を上げる方法(おわりに) 関連記事 Adsenseでの確認方法 TOP→パフォーマンスレポート 期間指定 解析開始地点に開設日を指定 月を指定 月ごとのグラフ表示完了 レポートタイプを月別に指定 開始月～当月までのレポート表示完了 レポートタイプに広告ユニットを指定 見積もり収益額の高い順番に広告ユニットを表示完了 総収益 総

どうも、まさとらん（@0310lan）です。 みなさんは、「CSSフレームワーク」を活用しているでしょうか？ いきなりフレームワークと聞くと、「なんだか難しそう…」と思ってしまうかもしれませんが、最近は誰でも利用できるようにシンプルな設計で公開されているモノが増えています。 そこで今回は、多機能でありながらも学習コストが低い「CSSフレームワーク」を厳選し、レスポンシブ対応でモバイルに優しいものをいくつかご紹介しようと思います！ ■CSSだけで多彩なサイトを構築できるフレームワーク！ 【 Picnic CSS 】 Web制作に必要なコンテンツを、とにかく簡単な手順で手っ取り早く構築できるように設計されているのが「Picnic CSS」です！ 特に、Flexboxを活用した非常に柔軟なグリッドレイアウトや、JavaScript不要でインタラクティブな要素を構築できる機能などはとても便利だと思

このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.