Webの役割は? ・企業宣伝/特化した商品の告知/情報提供/販売/… Webでアピールしたいことは? ・競合他社と差別化できることは? ・Web上では言わずにおきたいことは?(ex.価格) ターゲットユーザーは? モバイル(スマホ)対応?
まずは紙。家にあるチラシの裏の白い部分でも可能なのですが、方眼のものが製図しやすいです。お気に入りのノートを使ってみてください。後述するプロトタイプ制作ツールのMarvelから、無料のプロトタイピング用紙(PDF)が配布されているので、こちらを使ってみてもいいですね。 基本的にどんなペンでも構わないのですが、太いペン、細いペン、薄い色(灰色)のマーカーの3種類あれば文句なしです。マーカーはなんやかんやコピックが使いやすいのかなーと思います。 その他 紙とペンだけでOKですが、よく使うアイコンが手軽に描けるUI Stencilsという定規兼ステンシルがあると便利です。iPhone用ステンシルだけではなく、様々な種類が用意されているので、興味のある方はUI StencilsのWebサイトを覗いてみてくださいね。 ペーパープロトタイプの描き方 1. ざっくりとしたレイアウト組み まずは画面をレイ
中型ライダー(二輪)免許を持っているライターの内藤です。 本日は、ライダーキック並みの強烈さで役に立つ見本サイトをまとめてみたいと思います。 Web屋さんはご存じの方も多いかもしれませんが、ブログをしている一般の方、Webデザイン・DTPに興味のある方、お店を持っている方なども必見です! 部品に特化した見本 部品に特化した見本サイトをご紹介します。 見出しデザイン(h1,h2,h3……その他DTPでも) はじめは見出しデザインに特化した見本サイトまとめ。 見出しデザイン.com http://midashi-design.com/ 見出しタグ(h1,h2,h3……)のデザインの見本ですが、DTPなどでもヒントになるものがたくさんあります。 カテゴライズは、グラデーション・テキストのみ・テキスト非画像・上線・下線・丸・四角・囲み線・斜線・点線・角丸。 ヘッダー部分に凝っても見出しが適当だと全
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ(特にIE9以下)によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
最近のWebデザインでよく利用される1カラム、2カラム、3カラム、カード型、ボード型の基本的なグリッドをはじめ、ランディングページ、プロダクトページ、ギャラリー、ポートフォリオ、カート、FAQ、コンタクト、マップなど、さまざまなレイアウトが用意されたワイヤーフレームやフローチャートを作成するための素材を紹介します。 UI Titles UI TILES: WEBSITE FLOWCHARTS ダウンロードできる素材のフォーマットは、4種類。 .psd(72種類のレイアウトとチャート) .ai(72種類のレイアウトとチャート) .sketch(72種類のレイアウトとチャート) .png(72種類の各レイアウト) 各フォーマットにはそれぞれ72種類のレイアウトとチャートが揃っており、ワイヤフレームやフローチャートやサイトマップとして利用できます。
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする >> 先日、アイトラッキングに関する記事を配信した所、予想以上の人気がありました。アイトラッキング以上に簡単に実施できるのが、マウスの導線を追うヒートマップテスト。様々なASPサービスも提供されており、低価格で導入できますよね。今回の記事では、数多くの公開事例や調査を通してヒートマップテストで会得した19のデータを紹介します。 — SEO Japan ヒートマップは、ビジターの行動を分析する上で大いに役立つ。その他のメソッドでは得られない見解を導き出し、その結果、コンバージョン率を大幅に引き上げることが出来る可能性がある。 ヒートマップは、マウストラッキングとアイトラッキングの2つに分類される。大多数
クラウドソーシングサービスなどというサービスにちょっと手を出してみました。結論からいうと、正直あまり使いたくないなと思いました。よくも悪くも名前を聞くランサーズというサービスについてです。なんかもっと上手に付き合う方法がある気がしてたんだけどなあ。 クラウドソーシング(というかランサーズ)について どんなサービスか ランサーズ 一言でいうと、仕事をやってほしい人と仕事をしたい人のマッチングサービスです。 特徴 良い所 営業しないでもお客さんと出会える可能性がある エスクロー入金(後述します) 手数料は無難な料金設定だと思う。特に文句はない。 悪いところ 今からツラツラと書く。 どんな仕事内容がマッチングされているのか システム開発 webシステム・アプリ開発・ソフトウェア開発・VBAなど・ゲーム開発・サーバ構築・セキュリティ・DB構築 Web制作 ホームページ/webデザイン・スマホ/モバ
もくじ PHPでSNSシェア数を取得する オリジナルSNSボタンを設置する シェア数取得〜SNSボタン設置までの流れ おまけ:cssでフキダシの作り方 仕上がりイメージ 仕上がりイメージはこんな感じです。ボタンの種類は今回は自分がサイト制作時によく設置する以下の5つ(Twitter/Facebook/Google+/はてなブックマーク/LINE)とします。 ※LINEボタンについては残念ながらシェア数の取得方法がわかりませんでしたので、LINEボタンのみ吹き出しはナシです。 ※LINEボタンはオリジナルデザインにできない決まりなので、LINEボタンのみ公式デザインです。 今回もサンプルを作ってみましたよ〜。 サンプル お世話になった記事 今回の記事は以下のサイト様にお世話になりました!ありがとうございます!特にPHPでのシェア数の取得方法は本当に助かりました。もはや今回の記事はこちらのサイ
フリーランスをスタートして半年以上が過ぎて、まだまだ月々の売上は売上報告にも書いている通り、多い時と少ない時の差がかなりありますが、ありがたいことに仕事自体は次第に増えています。 そうするとしっかりと考えておかないといけないのが、デザイン料金の設定です。これまではクラウドソーシングでのコンペや受注案件など、価格が決まっているものに応募したり、受けたりする流れでしたが、これからクライアントや代理店の方と直で料金の交渉をしたり、見積書を提出することが増えていきます。 そこで改めてその中のデザイン料金の相場について考え、まとめてみました。 デザイン料金で揉める場合 サバイブログでは過去に「デザインのクオリティと値段の関係をハッキリさせておこう」、「【クラウドソーシングも含む】プロに低料金の案件を気持良く、しっかり仕事をしてもらうコツ」という記事で、デザインとお金の関係に関しては色々と思うところを
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記: 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです! 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1:SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
こんにちは。日本ディレクション協会 関西支部の出原です。 関東では既に何度も開催されている「0からのWebディレクション講座(通称0ディレ)」が、ついに関西でも開催されたので、今回は参加レポートの形を取りながら、そこで得た学びや思ったことなどをまとめてみたいと思います。 まずは資料スライド公開から これを見るだけでもほぼ内容が把握できてしまいますが、せっかくなので以下に要点と個人的な留意点をまとめておきました。 ぜひぜひお役立てください。 コンテンツインデックス 前提となる背景、目的、課題を明確に言語化 ポジションの把握とコンテンツ設計 より具体的なユーザー定義 全ての根拠となるゴールをハッキリ設定する 1.前提となる背景、目的、課題を明確に言語化 今回喋っていただいたのは、東京講演でも人気講師としておなじみの高瀬さん。 プロジェクトの裏側にどんな背景があって、どんな課題があって、それをど
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
LPO研究所所長の鎌田です。 先日、弊社デザイナーが「新人Webデザイナーにありがちな5つのコミュニケーショントラブルとその解消法」という記事を書きました。 この記事は公開2日で1万人以上もの方にお読みいただきまして、本当にありがたい限りなのですが、そのなかで 「指示を出すディレクターにも問題があるのでは?」 というご意見を同時に多数いただきました。 皆さんの仰るとおりでして、「売れるWebデザイン」というのは、デザイナーとディレクターの真剣勝負によってのみ生まれます。どちらか一方が依存している状態、考えていない状態では、ターゲットの心を掴むデザインを作ることはできません。 では、「売れるデザイン」をWebデザイナーに作ってもらうために、ディレクターは具体的にどう動けば良いのでしょうか? 実はデザインディレクションにも、誰でもカンタンにマネできる「ちょっとしたコツ」があります。 今回は「デ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く