Visualize Website Structure – Sitemap
2014年8月17日 Webサイト制作, 便利ツール Webサイト制作の準備編２：Webサイトの構成図（サイトマップ）。どのページがどこへリンクするのか、ページの重要度など、Webサイトの構成を図にまとめておくと製作途中で変更があった場合でも整理しやすくなります。Webサイトの構成図を作るときのポイントと便利なオンラインツールをまとめてみました。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その2 目標：Webサイトの構成を明確にする 必要なもの：紙とペン 対象レベル：超初心者OK！ 目次 誰のため？何のため？Webサイトを作り始める前に。 Webサイトの構成図を簡単に作れる便利ツール ←今ここ Webサイト設計図 – ワイヤーフレームの作り方 PhotoshopでWebサイトのデザインをしよう Photoshopでスライスし、パーツ画像を作成するコツと方法
Day 19 – 365psd
Thousands of Photoshop files, Templates and Mockups for freeIn our collection of free PSD files, Mockups and Templates you'll find something useful for your design project: Maps, Cards, Brochures, Poster frames, text with effects and quotes, Infographics and so much more! Download for free, for personal and commercial use!
2010年、押さえておきたいウェブデザインのトレンド
CSS3やHTML5などをはじめ、トレンドのフォント、見出しのデザイン、クオリティをアップする背景など2010年に押さえておきたいウェブデザインのトレンドをWeb Designer Wallから紹介します。 Design Trends (Predictions) in 2010 下記は、各ポイントを意訳したものです。 元記事では、サンプルも豊富に掲載されています。 はじめに 1. セリフフォント 2. 大きい見出し 3. 埋め込みフォント 4. 繊細なテクスチャ 5. ミニマリストとグリッド 6. CSS3 7. モバイル対応 はじめに 2010年はウェブデザインが今まで以上に刺激的で試行錯誤に満ちたものになるかもしれません。 HTML5、そしてCSS3の魅力的な新機能をデザイナーとデベロッパーが巧みに取り入れようとしています。 去年からのトレンドだと、現在は手描き風や大きい背景は少なくな
2009年のPhotoshopチュートリアルTOP30 – creamu
WEBDESIGNDEVで、2009年のPhotoshopチュートリアルTOP30が公開されています。 いくつかご紹介しますね。 Boxed Art Web Design Tutorial Boxed Artのサイトをデザインしていく過程を解説したチュートリアル Magazine WordPress Theme Photoshopで、マガジンスタイルのWordPressテーマを作っていくチュートリアル Sleek Web Portfolio 彩度の高い色を使ったポートフォリオをデザインする方法 Movie Sunset Photoshopで映画のようなサンセットを描く Light Effect Basics 光のエフェクトを基礎から学べるチュートリアル 結構勉強になるものがそろっていますね。 一度見てみてください。 Top 30 Photoshop Tutorials of 2009 ほぼ
nanapiのデザインプロセス（その１） - エスカフラーチェLLC
9/1にロケットスタートからリリースされたサイト「nanapi [ナナピ] - みんなで作る暮らしのレシピ -」でのサイトデザインを担当させていただきました。 制作過程みたいなものを書いてみたいと思います。 ロケットスタートに全力投球を誓った、けんすうさんからのご依頼 ある日、ロケットスタートの社長、けんすうこと古川健介さん（以下、けんすうさん）から ：HOWTOサイトをつくりたいからデザインを依頼したい！ ということで早速じっくりとお話を伺うことにしました。 ベンチャーだからこそできる！？合宿的制作スタイル 以前けんすうさんと一緒にお仕事させていただいたときに双方にとってよかったことがあります。 それは、デザインカンプができあがるまでのプロセスの段階で、短期間ながらじっくり直接やりとりする時間をつくる、ということでした。 宿泊こそ伴わないものの、合宿に似たようなスタイルです。 長い時
効果的なウェブサイトに対する意識のギャップ
「効果的なウェブサイトって？」というのは単純な質問ではあるものの、視点や役割によって意見が違いそうです。この抽象的な質問に関してレポートにまとめている文書を見つけました。オンラインラーニングやウェブ上のクリエイティビティの推進のために様々な活動をしている NPO 団体 IDEA が Factors that improve online experience というレポートをまとめています。NPO, ウェブサイト制作会社, 利用者の３つのブループに分けて「効果的なウェブサイトの要素は何か」という質問に応えてもらったそうです。詳しい調査結果と解説が書かれた PDF も同ページでダウンロードすることが出来ます。 作る側と利用者とのギャップというのは未だにあるみたいですね。今回の調査で大きく分けて 8 つの特徴が見つかったみたいなので以下にまとめておきます。自分も改めて意識しなければならないなと
複数回のユーザー接触を想定したシナリオ設計
◆本コラムのサマリ ・保険などの金融商品、あるいは高額な商材など、検討期間が長い商材を扱うウェブサイトでは、ユーザーは複数回訪問する中で徐々に検討度合いを深めることを前提としたユーザーシナリオを組むことが重要である。 ・即決型のユーザーと、長期検討型のユーザーの両方が存在することを踏まえ、両方に対して最適な見せ方ができるサイトをつくる必要がある。 ユーザーが初回訪問からコンバージョンまでにかかる期間は様々 まずは下のグラフを見てください。これは、ある商材のコンバージョンと広告接触（広告を何回クリックしたか）回数を集計したデータです。 1回の接触でコンバージョンへといたるユーザーは、実は全コンバージョンの半分にも満たないことが分かります。 ※このグラフは広告からの訪問で回数を計算しているので、ブックマーク等を含めると、さらに複数回訪問しているユーザーの割合が増加します。 もちろん商材にも依存
【海外事例に学ぶ】 リッチ化するフッター (ユーザビリティ実践メモ)
これまで当サイトでも、いくつかの記事でフッターについて扱ってきました。最近、海外のサイトを見ていると、フッターについて新しい取り組みが見られます。 今回は、海外サイトの動向をサンプルとし、フッターにおける新たな取り組みのメリットをご紹介します。 Geek Trends: 15 Footers with great usability ( pop upon magazine ) 6 Things To Include for a User Friendly Footer ( UXBooth ) Modern Sitemap and Footer ( WebDesignerWall ) Footers (76 examples) ( Smiley Cat Elements of Design ) 例えばTIGERS （http://www.tigers.org.au）のフッター(下図)では、革
Webデザイン劇的ビフォーアフター09年春版 (1/4)
この4月、新しい事業年度のスタートに合わせ、各社のWebサイトが相次いでリニューアルした。ここでは、3月下旬～4月にかけて大規模なリニューアルを実施したWebサイトを編集部でピックアップし、リニューアル前後の画面写真付きで紹介する。最新の企業サイトのトレンドをつかみ、自社サイトのリニューアルの参考にしよう。 マイクロソフトが運営するポータルサイト「MSN」は、2008年4月以来ほぼ1年ぶりにトップページをリニューアル。「毎日使いたくなるMSN」（マイクロソフト）を目指し、使い勝手を高めた。 3カラムのレイアウトは従来のままだが、それぞれのカラムの役割を明確にし、各カラムに入る要素を分類、整理している。具体的には、左カラムにHotmailの受信状況や天気などを確認できる個人ツール類を、中央カラムにニュースなどの最新情報を配置。ディスプレイ広告や企画広告への誘導はすべて右カラムに集約した。 ま
初心者が簡単にプロっぽく記事の内容を仕上げるテクニック*ホームページを作る人のネタ帳
第３回目の特集は、記事の内容を少しだけレベルアップさせるテクニックです。 今回のトレーニングを全て終えた時、あなたのブログは少しだけレベルアップするかもしれないです。 あまりギスギスせずに記事を書きたいんだという方はそれでも良いと思います。 難しい事を要求するわけでもありません。特に、社長ブログや、社員ブログなどの、ぞくにいう『ブログ初心者』の方々を相手に考えた方法です。次の３つのステップにチャレンジしてみると、いつの間にか身についてしまうと思います。 興味のある方は是非やってみてください。やってダメだったら自分流を模索してみるのも悪くありませんので！ 要点分解トレーニング さて、記事を書く前に、必ず記事にしようと思うネタがあるはずです。 ネタがないのに書こうと思ってかける人なら素晴らしいですが、大体事前にネタがあるはずです。 そのネタを、まず分解する事。 これがこのトレーニングの肝です。
意外性が心地よいJSメニューのWebデザイン (1/5)
JavaScriptライブラリでリッチなUIを手軽に作れるようになったのはいいけど、最近ではそれもすっかりマンネリ気味。そろそろ、ほかのWebデザイナーとは違うデザインを取り込んで何とか差をつけたい――。そんなときは、国内のデザイン誌やブログではなく、海外サイトに目を向けてみてはどうでしょうか。たとえば、優れたWebサイトを紹介している「dzineblog」というブログなら、海外のWebデザインのトレンドをいち早くチェックできます。 そのdzineblogの膨大なコンテンツの中から、今回注目するのが、「10 Websites That use JavaScript Animation Effectively!!」という少し前のエントリー。JavaScriptによるアニメーションエフェクトを上手に使っているサイトを取り上げており、その中から、「Playground Blues」をピックアップ
その表現、ユーザに分かりやすいですか？ (ユーザビリティ実践メモ)
ユーザにとって分かりやすい文言・説明はウェブコンテンツ制作の基本です。 専門用語は思った以上にユーザに理解されていませんし、会社固有の名称・モデル名なども説明がなければユーザには何のことか分かりません。 最も個別製品ページへ進みたいと思うページはどれでしょうか。 例Aのように専門的な説明文章の場合はどうでしょうか。 専門用語が多く、各製品の違いを簡単には理解できません。 例Bでは、製品モデル名や型番のリンクのみを展開しています。 これではそれぞれの製品の違いが分からず、どの製品を見るべきかユーザはわからないため、ここで離脱してしまう可能性があります。 例Cが最も個別製品を選択しやすいのではないでしょうか。 価格、形、馬力といった大まかな情報があるため、各製品の違いが端的に分かり、詳細を確認するステップに進みやすくなります。 製品一覧ページに限らず、ユーザ（製品やサービスに詳しくない人）にと
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
離脱率90%は当たり前！？最後の難関『入力フォーム』の離脱を改善する
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
Webサイトの構成・文書作成のコツは「パラレリズム」：日経ビジネスオンライン
3月17日現在、一冊の本の入稿を終えて、この原稿を書いているところです。この編集作業をしていた時、Webサイトや社内文書でも、似たような間違いを犯しているのでは？ と感じるポイントに気付いたのです。それは、単純なようで見落としがちなことでした。 「配慮」も最後までできていないならバツ 原稿執筆を依頼した著者さんから、シンクタンクや政府などの調査結果を掲載してほしいとデータを受け取りました。例えば、小売業の市場シェアに関するデータで、原稿に合わせる形で7種類あったのですが、そのうち2種類だけに調査した年月日が書かれていたのです。 そこで「あのー、残りの5種類も年月日をもらえないですかね？」とお願いしました。「パラレリズム」が最後まで守られていなかったからです。 パラレリズムというのは、「並列」という意味。テクニカルライティングなどでは、よく知られている手法で、内容的に並列するパラグラフや章で
404 Not Foundページをユーザーにとって、より有用にする5つのチップス
2. Keep it familiar 見慣れたデザインで 404ページのデザインは、そのサイトの他のページと同様にするのが望ましいです。異なったデザインにしてしまうと、ユーザーはサイトから離脱したと思うかもしれません。 404ページには、最低限、あなたのサイトのロゴと404のエラーメッセージを配置してください。 3. Keep it Basic ベーシックに 404ページでユーザーにエラーということを突きつけて圧倒させないでください。404ページのゴールは、可能な限りユーザーが探していたページに導くことです。 その１つの方法として、404ページにアクセスが多いページのリンクを掲載する方法があります。 また、検索機能を設置することも効果的な方法です。 4. Offer some direction 道案内を提示 404ページには、ユーザーにいくつかの道案内を提示するべきです。 最も重要な道
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
http://www.designwalker.com/2009/06/flash-effect.html
IDEA * IDEA
seofromusa.com