Webサイト制作の一連の流れをまとめてみました
Webサイト制作の一連の流れをまとめてみました。クライアント向けにまとめたものを少し手直ししてのせています。新人Web担当者さんや、新人ディレクターさんの参考になるかなと。 なるべく難しい言葉を使わず、理解しやすいよう平易な言葉で書いております。 ※流れや手順は制作会社によって違うのですが、概要はつかめるかなと思います。 目次と流れ 1. サイトのコンセプトを考える 2. 競合他社からクライアントのお店や商品を選んでもらうためのポイント（強み）を整理する 3. そのサイトで一番伝えたい内容を決める 4. お客さんが必要とする3以外の情報や、クライアントの伝えたい情報をまとめる 5. サイト更新は誰がするのかを決める 6. 想定使用デバイス（PCやスマートフォンなど）を決める 7. サイトの周知・宣伝方法を考える 8. ページの設計図をつくる 9. サイト制作にかかわる必要な素材を準備する
2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ
数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ（特に画像）、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大きく変化するウェブデザインの7つの傾向 2014年、注目度の高いIT系の職種・役割 2014年、ウェブ制作業界全体の流れ まずは、2012, 2013年と的確な予測をだしてきたsitepointの2014年のウェブ制作業界の全体の流れから。 10 Web Predictions for 2014 スマートフォン中心の年 最終的にはデスクトップからのアクセスをスマフォが超える HTML5のウェブアプリ
Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人
コア・JavaScript ( JavaScript. The Core. ) - oogattaの勉強日記
この文章は、 Dmitry A. Soshnikov さんの、 ECMAScript に関する優れた記事 "JavaScript. The Core." を許可を得て翻訳したものです。世の中に、 JavaScript のブラウザ API や、実装系に関する記事は多々あれど、 ECMAScript の仕様に則って、ここまで詳しく説明してくれている記事は殆ど無いと思います。今回は翻訳できておりませんが、文中で参照されている Dmitry さんの ES3 シリーズも、読み応えのある（ ECMAScript3 の仕様の副読本としても読める）素晴らしい内容ですので、是非チャレンジしてみてください！（ご要望があれば訳します翻訳許可を頂いたので、この記事内で参照されている章から逐次翻訳を進めます！）。 ちなみに Dmitry さんは、計算機科学や数学にも明るい方でらっしゃいます。が、私は違います。極力
中小企業や個人経営規模相手のWebディレクションで気をつけている１５のこと。 | 笑顔を創りたいＷｅｂ屋の日常
笑顔を創りたいＷｅｂ屋の日常 Ｗｅｂ業界からひょんなことで専門学校の先生に。そしてまたＷｅｂ現場に戻ったＷｅｄディレクターのブログ。情報デザインやＷｅｂの勉強をしています。 あくまで”僕が”です。そこ大変重要ですｗ 僕もまだまだ勉強中で、これが全て正しいと思えるほど見極めていません。 他にもあるだろうし、もっと大事なものもあるかもしれません。 それは各々考えてもらって（もしよろしければ教えていただいてｗ）、とりあえず同タイプの仕事している人の叩き台にでもになればなと思って挙げてみた次第です。 というのもですね、僕はWeb屋としてみるとなんか物凄く変な経歴・経験をしている人なのですねｗ まあ、Web業界って割と他業界から来る人たくさんいますけどね。僕は印刷会社→大手Weｂ制作会社→専門学校教員（正規職員）→弱小ITベンチャーなので、なかなかこういう奴はいないと思いますｗ 教員とか普通はできま
ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド
■iOS（iPhone OS） iOS（3.0以前は「iPhone OS」）は、アップルがiPhoneなどの小型端末用に開発した専用OSです。初代iPhoneに1.0が搭載されたあと、新モデルの発表に合わせてバージョンを重ねています（iPhone 4にはiOS 4が搭載）。iPhone 3G以降はOSのバージョンアップができるようになり、最新版のiOS4にも対応しています。 ■iPhone標準ブラウザー「Safari」 iPhoneには標準ブラウザーとして「Safari」が搭載されています。SafariはもともとアップルがMac OS X向けに開発したWebブラウザーで、Windows版も無償で配布されています。基本的な表示能力はiPhone版もデスクトップ版もほぼ同じですが、iPhone版にはいくつの制限があるため、「Mobile Safari」などと呼んで区別することもあります。 Sa
iPadに最適化したサイトがつくれるかもしれない5つの方法（基本編） - EC studio デザインブログ
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> /* 好ましくない例 */ これを使うことで横幅1024px以下のデバイスでアクセスされた場合に、ipad.cssを読み込むということはできるんですが、PCの場合でもこの程度の解像度のものはありますし、なおかつ利用しているブラウザが最近のものであれば、このコードを理解してしまいます。 つまり、「iPadだけ」に適用させるということは実質できないということになります。 この点はご注意ください。 デバイスの幅に左右されないリキッドレイアウトにする 前述のユーザーエージェントの話に次いで、レイアウトの話です。 iPadのデバイスとしての画面サイズはポートレート（縦向き）であれば 横
iPhone対応Webサイト構築入門（前編）：SourceForge.JP Magazine
iPhoneにはWebブラウザとしてMac OS X/Windows用のSafari（以下、PC版Safari）のサブセット版が搭載されている。iPhoneのSafariでは一般的なWebサイトのほとんどが閲覧可能だが、Appleが提供している「iPhone向けのWebサイトデザイン」に従ったデザインを施すことで、iPhoneで閲覧した際により操作しやすいWebサイトを構築できる。本記事では、このようなiPhone向けのWebサイトを作成するテクニックを紹介する。 なお、以下では主にiPhoneについて述べているが、iPod touchに搭載されているSafariについても仕様はまったく同一だ。 iPhone版Safariの特徴 iPhoneに搭載されているSafariは、PC版Safariに採用されているレンダリングエンジン「WebKit」を使用している。また、フォントについてもMac
無料ウェブ素材｜styraise（スタイライズ）
指アイコンや初心者マークなどウェブサイトでよく使うアイコンやイラストをPSD形式・PNG形式で無料配布。
IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester | コリス
IETesterは、IE5.5, IE6, IE7, IE8beta1の確認が同時にできるアプリケーションです。 IETester [ad#ad-2] IETesterを利用するには、上記IETesterのページの「Download IETester」から「install-ietester-v0.2.exe」ダウンロードし、IETesterをインストールします。 IEのバージョンの切り替えは、「New Tab」から切り替えることができます。 簡単に使用しただけですが、IE5.5, IE6, IE7, IE8beta1のレンダリングの違いを確認できました。 バージョン0.2の動作条件は、Windows XP or Vista + IE7以上となっています。XP + IE6の場合、IE7, IE8のモードが動作しません。 Windows XP + IE7, IE8beta1の環境で使用したとこ
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
ウェブサイトにとって重要なユーザビリティの7つのクイックチェック
Quick Usability Checklist 下記は、その意訳です。 はじめに 下記の全ての項目が、すべてのサイトに当てはまるわけではありません。これらは、あなたのサイトの方向性を示唆するものです。 1. Site ID サイトはIDは非常に重要な要素で、ページ上部の左やナビゲーションの側によく配置されているサイト名やロゴのことです。 サイトIDには、トップへのリンクを設けるか、ナビゲーションにトップのリンクを設置する必要があります。 2. Page Name ページの名前は、サイトIDと同様にユーザーに明確に伝える必要があります。 ビジュアル的にページの名前であると分かるように目立たせるべきです。 また、ユーザーがそのページに到着するためにクリックしたテキストと一致している必要もあります。リンク元とリンク先が同じ内容のものであれば、ユーザーは混乱することがなくなります。 3. Na
サイト公開前に役立つ２５のユーザビリティチェックリスト:phpspot開発日誌
25-point Website Usability Checklist | User Effect サイト公開前に役立つ２５のユーザビリティチェックリストが公開されていましたのでメモしてみました。 サイトの公開前にチェックリストとして使うといいかもしれません。 アクセシビリティ 1. ロード時間が速いか？(60KBぐらいがベター) 2. テキストと背景のコントラスト調整(差異が低く見にくくないか) 3. フォントサイズが読みやすいサイズか？行間、文字間は適切か？ 4. Flashやアドオンは控えめか？ 5. 画像に適切なALTタグが指定されているか？ 6. カスタマイズした404ページがあるか？デフォルトは非常に不親切 7. カンパニーロゴが分かりやすい位置におかれているか？ 8. キャッチフレーズが適切に設定されているか？ 9. 5秒で大体どんな内容が分かるものになっているか？ユーザは
A5:SQL Mk-2 - フリーの汎用SQL開発ツール/ER図ツール
A5:SQL Mk-2は複雑化するデータベース開発を支援するために開発されたフリーのSQL開発ツールです。 高機能かつ軽量で、使い方が分かりやすいことを目標に開発されています。 SQLを実行したり、テーブルを編集するほかに、SQLの実行計画を取得したり、ER図を作成したりすることが出来ます。 特徴・機能 OCI接続・直接接続・ADOまたはODBCを介したDBへの接続 Oracle DatabaseはOCI経由の接続・直接接続が出来ます。 PostgreSQLとMySQLは直接接続が出来ます。 Microsoft SQL Serverは、OLE DBプロバイダを直接呼び出した接続ができます。 IBM DB2は、ODBCドライバを直接呼び出した接続ができます。 その他のデータベースは、ADOまたはODBCを利用して接続します。 Oracle, PostgreSQL, MySQLは、A5:SQL
ウェブサイトでやってしまいがちなユーザビリティのミス
ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー
無精で短気で傲慢なプログラマ web 開発のヒアリングシート/チェック項目
要件定義のヒアリングシートはいくつか見たことはあるが、web 開発に 特化したまともなヒアリングシートを見たことがないので作ってみた。 「サイトの目的は」などの上流部分はあえて省いて、機能・実装にフォーカスしている。 思いつくままに記述してみたが、結果としてはインターネット上の コマース向けサイトに特化した形になった。 請負時のヒアリングシートと、発注時の要件伝達漏れチェックシートと、 開発時のレビュー観点の元ネタとして使えるといいなぁ。今後気づいた ところがあれば追記していきます。 ●2010/02/24 追加分。 - サイトメンテナンス時のアナウンス要否 - メンテナンスページは「503 Service Temporarily Unavailable」を返すようにし、 検索エンジンにキャッシュされないよう注意する。 ●2007/08/23 追加分。 404/403/500 などのエラー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
sp-web.jp
Webサイト品質管理のチェック項目リスト | 人手に頼らないWebサイトの戦略的品質管理指南
%26utm_content%3DGoogle%2520Reader)
css-lecture.com
http://www.designwalker.com/2009/06/flash-effect.html
