自分のwebサイト作る工程 - MEMOGRAPHIX
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
海外と日本｜僕らのWeb制作戦争のお話
オーストラリアに行っていた中学時代の友人が、現地のWeb制作会社で働いて、この度現地の差別的な扱いに嫌気がさして帰って参りました。 同時に、「じゃぁ一緒に語り明かそうぜ会」を開いたところ、8人のむさくるしい男と3名の天使が集い、決して合コンではない同窓会を開いたわけです。そこでは製造業をする人もいれば銀行の受付をする人など、様々な業種の人が集まったわけですけど、まぁ私としてはオーストラリアのWeb制作が気になったものでその辺を熱く語り合ったお話をまとめさせて頂きました。 当たり前ですが日本は大きく違う メンバーのなかでWebに関わる仕事をしているのは天使2名と男2名（私含む）という状況で、そのへんの話がどうしても盛り上がってしまったのです。 オーストラリアと言えばコアラですが、そんなことよりBOSSがすごいという彼（以下；銀メガネ）。 彼は私におみやげを用意してくれていたようで、変な人形の
Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ
私はフリーランスの Web デザイナーとして、クライアントさんの Web サイトを作成するお手伝いをさせていただいています。今回は、私が仕事でデザインするときに気をつけている事や、Web 制作のフローをまとめてみました ...。 Webサイトを作るとき、みなさんはどんな制作フローをたどって作ってますか？私はフリーランスで仕事をしていて、最初から最後までひとりで作ることが多いです。今回はふだんデザインする時に気をつけてる事や、いつもしている Webサイトの作成フローをまとめてみました。もっと効率化できることがあるはずだなーと思いつつ、最初から最後までを書いてみました。 また、Webデザイナーってどんな仕事なのっていう質問をときどきいただくので … こんなことしてます … みたいな紹介です。これはあくまで私が Webサイトを作る時にしているフローで、他の Webデザイナーさんや制作会社さんと違
CSSの記述が3倍速くなる「LESS」の使い方 (1/2)
2012年02月09日 13時58分更新 文●斉藤祐也／<a href="http://css.studiomohawk.com/">CSS Radar</a> 最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、「Blueprint」や「960 Grid System」に代表されるフレームワークが登場しています。 「LESS」や「Sass」のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CS
スマホサイト案件の見積もりについて
スマホサイト案件の見積もりについて 「Android案件の見積り」や「スマホ案件の見積もりについて」を受けて、アプリではなくHTML+CSSでつくるスマホサイト制作の見積もりではまりやすいポイントをまとめています。 HTML+CSS構築ではPCの0.７倍くらいの単価 スマホサイトはPCより小さいのでHTML+CSSの構築コストも安くみます。ただ、CSS3で作ったほうが良いところで画象の切り出しより手間がかかることもあります。ならすとページ単価はPCの0.７倍くらいの感じじゃないでしょうか？ 検証コストは増大 対応端末が多く検証コストはPCと比較して増大します。iPhone3G、iPhone3GS、iPhone4、iPhone4Sの中から2端末ぐらい(iOS4.x系とiOS5系)。Android2.2、Android2.3から売れてる端末で2端末ぐらい検証するのがよいでしょう。(場合によって
HTML/CSS/PHP等のコーディングに、無料のNetBeansが快適過ぎる件
私は結構エディタ難民で、HTML/CSS/PHP等をコーディングする際のエディタをWindows・Mac含め色々試してきましたが、最近は NetBeans IDE に落ち着いています。 NetBeans IDE は厳密にはエディタではなく、Windows・Mac・Linux用の無料で利用できるIDE（統合開発環境）の一種です。 ちなみに、↓のキャラクターは NetBeans IDE 日本語コミュニティの公式マスコットの「ねこび〜ん」です。 私はWordPressのテーマファイルを作成しているときに、PHPで独自のCMSを開発されている @kawagooch さんに勧められて使い始めたのですがとてもしっくりきたので、以後 HTML/CSS/PHP などWebサイトのコーディングには NetBeans IDE をメインで使っています。 私自身、NetBeans IDE を使うようになってからサ
中小企業のウェブサイトで陥りやすい5つの落とし穴とアドバイス
Top 5 Web Design Mistakes Small Businesses Make [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. 役に立たないナビゲーション 2. ゴールが不明瞭 3. カラーとコントラスト 4. 分かりにくいコンテンツ 5. 情報の詰め込み過ぎ はじめに もし、あなたが中小企業のオーナーであるなら、あなたのウェブサイトはあなたの会社の中枢であり、マーケティングとブランディングにおける極めて重要なパートでもあります。 見込みのある顧客がサイトのコンテンツを目的にあなたのサイトを訪問します、それはあなたの会社がどのように見えるかを意味しており、サイトのアピアランスとユーザビリティは成功への重要なポイントとなります。 しかしながら、サイトのデザインを間違ったものにしてしまうと、あなたのビジネスに悪影響を与えてしまうことになります。ここにあ
[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary
これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。 私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。 私は以前、ファッション雑誌やビジネス誌の組版（MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う）の仕事をしていて、見出しは言うまでもなく、本文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。 私は、見出しやタイトル画像における文字組み
![[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6e22153e1233d79c8da8733fc112f935fe5ee4a/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Ftypographic-1-1.png%3Ffit%3D500%252C250%26ssl%3D1)
SEO検索エンジン最適化チュートリアル
サイトやページのコンテンツを読みやすく、わかりやすく、使いやすく、そして美しくすること、つまり良好なユーザーエクスペリエンスを提供することは、Webデザインが担う重要な役割であり、人間のユーザーに対して有効であるのと同様に、SEOにも有効に働きます。 SEOに強いWebデザインの基本ターゲットユーザーの設定はWebデザインに欠かせないプロセスですが、そのターゲットユーザーのひとつに検索エンジンを加えることで、WebデザインはSEOフレンドリーになります。現在の検索エンジンは、人間のユーザーと同じようにサイトのユーザーエクスペリエンスを評価するからです。 ウェブサイトは利用者の便宜のために構築するべきであり、すべての最適化はユーザー エクスペリエンス向上のための調整である必要があります。検索エンジンもそうした利用者のひとつであり、他のユーザーがあなたのコンテンツを見つけるための手助けをしてい
直感を殺した効果測定崇拝は止めよう
宗教になった効果測定 昔、Webデザインは直感・経験・感性のみで作られていました。しかし、低価格・無料のデータ解析ツールが登場したことにより、より多くのサイトがデータ解析をサイトの成果測定に利用するようになりました。従来はページビューという大まかな数でしか価値を測定することが出来なかったわけですが、その場にいる利用者の姿も徐々に見えてくるようになりました。現在はページビューだけでなく滞在時間、訪問頻度、コンバージョンなど様々な要素を効果測定要素として取り上げるようになりましたし、それらを基に改善のプロセスが組まれるようになってきました。 ビジネスを考える上において、直感・経験・感性に行き過ぎていた従来の Web デザインは不十分な存在でした。そこで効果測定を積極的に取り入れようという動きが生まれたわけですが、今度は効果測定が『宗教化』してしまい本質を奪ってしまう場合も出て来ています。 効果
ウェブ制作に役立つ、便利な最近のオンラインサービスのまとめ -2011年1月
最近リリースされたものを中心に、デザイン、スタイルシート、ワイヤーフレーム、データベースなどに役立つオンラインサービス・ウェブアプリケーションを紹介します。
Yahoo! Japan で IE6 非推奨のお知らせ
昨日から出ていたみたいですけど、言われて実際に IE6 でアクセスしてみたら警告が出てました。12月から Yahoo! Japan では IE6 の使用で一部機能に制限がでるみたいですね。 昨日から出ていたみたいですけど、言われて実際に IE6 でアクセスしてみたら警告が出てました。12月から Yahoo! Japan では IE6 の使用で一部機能に制限がでるみたいです。 IE6 で見られなくなるよという話ではないので警告が鬱陶しいってことをのぞけば IE6 を使い続けてもそんなに支障がない感じの変更 （ヘルプを読む限りでは） みたいですが、これが少しでも IE6 のシェアを下げる結果になってくれれば Web 業界の中の人としてはうれしいことこの上なしですね。 実際に IE6 でアクセスすると出てくる警告はこんな感じ。 お客様のブラウザはInternet Explorer6です。 12月
みんながツイッターで遊んでいる今こそ古典の活用を | 企業ホームページ運営の心得
コンテンツは現場にあふれている。会議室で話し合うより職人を呼べ。営業マンと話をさせろ。Web 2.0だ、CGMだ、Ajaxだと騒いでいるのは「インターネット業界」だけ。中小企業の「商売用」ホームページにはそれ以前にもっともっと大切なものがある。企業ホームページの最初の一歩がわからずにボタンを掛け違えているWeb担当者に心得を授ける実践現場主義コラム。 宮脇 睦（有限会社アズモード） 工具販売の「ヤスリ.jp」には水曜日の深夜1時過ぎに沖縄県から来店があり、メガネ販売の「クラフト」では朝の3時に「メガネの洗い方」を知るために客がやってきます。弊社には日曜日の深夜（あるいは早朝）2時55分に「営業戦略」、4時12分には「楽天市場 出店 失敗」、朝を迎えた7時に「セブンイレブン 戦略」……お気づきでしょうが、これはそれぞれのサイトに来る訪問者の話。 ホームページは365日24時間営業。アドバイス
webサイトの裏側の意識を変える事で売り上げをアップする方法
ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。 はたして、webサイト運営がどのように変わったのでしょうか。 ネットショップを運営している新規クライアントから、サイトリニューアルの依頼がありました。初めてのご依頼だったので、まずはヒアリングから開始。今回のリニューアルは、サイトであまり物が売れず、□□（私が作ったサイト）のように売れるようにして欲しいとの事でした。 しかし話をよく聞くと、当初サイトを作ったときは、ただ作っただけで、特に運営方法についてはアドバイスが無かったとのこと。私はリニューアル前に1つだけある事をするようにお願いしました。その方法とは、実はサイトをいじる事ではありません。結果、売り上げが5ヶ月で3倍になりました。 実は最近、webサイトを制作する側も、データに依存しすぎて、大事な事を忘れているケースが多かったりす
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cmmntr.com
詐欺的商売を始めたネット有名人と上手く商売しているネット有名人のビジネス構造の違い
PNGとGIFとJPEG…Web用画像の書き出し、どんな風に使い分けていますか？［2011年7月現在］ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳
http://e0166nt.com/blog-entry-844.html
僕がWebディレクターの肩書がついてから勉強した15のこと