スピードアップした！フロントエンジニアがWeb制作のために知っておきたいことまとめ
作成：2014/01/14 更新：2014/11/01 Web制作 > 以前までHTMLコーダーと呼ばれていたフロントエンドエンジニアは、表現の進歩やトレンドに伴って、ＣMSやAPIなどより高度な技術や知識を求められるようになりました。今回は今以上に効率化するために、フロントエンドやWebデザイナーが必要とする知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マルチデバイス対応 １．フルードレイアウト ２．ドロップレイアウト ３．ワンキャンバスレイアウト ４．可変グリッド ５．ブレイクポイント参考 ６．レスポンシブ対策ライブラリ パフォーマンス改善 ７．ページを高速化する CMS ８．WordPress化 HTML5 API ９．API一覧 クロスブラウザ対策 １０．IE関連 １１．横置き／デバイス対策 １２．Retinaディスプレイ対策
Web制作フローの再考とDesigning in the browser
多様化するwebサイト、増加するデバイスに適応していくために今までのWeb制作のワークフローも見直す必要があるのではないでしょうか。またその一つの手法としてDesigning in Browserについて書きました。 現在ではWebサイトも、インタラクティブなサイト、アプリのようなサイト、可変するサイトなど様々なスタイルが見られるようになってます。 また、Webを閲覧できる環境もPCからスマートフォン、タブレット、テレビ、カーナビなど増加し続けてます。 それに伴い今まで以上にテストケースが増えてきてます。 今までのような静的なデザインを作ってから開発、テストというWeb制作のワークフローでこの変化の流れに対応できてるのでしょうか。 まず静的なデザインはあくまでこのように見えるという仮説であり、 解像度やスクリーンサイズが異なれば見え方も変わってきます。 更にどのように動くのかまでは表現でき
極端に低い単価や無料で仕事をしてはいけない、いくつかの理由
長文を書ける場所がここにしかなかったので。 「経験が乏しいから」「実績を得るために」「自分を鍛えたいから」そう言って、極端に低い単価や無料で仕事を受けているフリーランスの人達をちらほらと見かけるようになり、ずっと違和感を覚えていたのでたまにはこんな話しも書いてみようかなと。 なぜ極端に低い単価や無料で仕事をしてはいけないか ゼロ円で受けた仕事の価値は、所詮ゼロ円の価値しかないから 「とにかく実績を増やしたいから」と安易に無料で何でも引き受けても、それは本当の意味での実績にはつながりません。無料で仕事を発注してくる人は、あなたが「無料で引き受けてくれる」事を最大の価値として捉えている場合があります。 また、極端に低単価や無料の仕事は、クライアント自身のモチベーションも低い事が多く、「提供される資料や画像の品質が低い、公開後の運営の品質が低い」なんて事も。品質の低い実績を量産しても評価してくれ
4月から無職になりました
3月いっぱいで勤めていた会社から解雇され（業績不振のため）、4月から無職になった管理人ですどうもこんにちは＼(^o^)／ 業績不振で解雇されたというと、「ああ不況なのね…」って感じがしますが、どうやら良く考えるとそれだけじゃないのではと思いました。 なので、ちかごろさいきんのWeb制作業界のことと、制作に携わる人は今後どうしたら良いのか、ということをつらつらと書いていこうと思います。 ※ちょっとネガティブ目線も入ってしまいますが、批判をしているわけではなく、このままで良いのかな、という問いかけです。 ※また、こういう会社じゃだめ、ってことではなく、こういう傾向になってるんじゃ、という考察です。 Web制作会社は二極化が進んでいる まわりのWeb関係の友人に話を聞いていると、Web制作会社は以下の二極化が進んでいると思いました。 A. 安い価格で制作物はそこそこのクオリティ、夜遅くまで対応し
Webサイト制作をたたき売りにしないために考えたこと。 « モノづくりブログ 株式会社8bitのスタッフブログです
こんにちは。株式会社8bitの高本です。 今年に入りそろそろ新しいお仕事の提案やら動き始めているここ最近ですが、Webサイトを制作している会社にとって、ただ「Webサイトを作ります」というだけでは成り立たなくなっている現状を痛感することが多くあります。 破格で制作できる会社があったり、フリーランスの方も活躍しやすい業界なので、価格競争という点ではWeb制作業界もまさに牛丼のような状況になっている感じがします。 安くて早いのは当たり前！ Webサイトはパンフレットなどの紙モノより下に見られているとか、嘆いてばかりではしょうがないので、Web制作会社はどうしていかないといけないか？について自分なりに考えてみました。 <<Webサイトに対する一般的な認識>> まずWebサイト制作ってどう思われているのか？ Webサイト制作の同業の方よりは他業種の方と仕事をする機会があるので、そのうえでどう思わ
時間 vs お金 vs クオリティ
2013年3月23日 Web関連記事 デザイナーのアイデアや考えを記事にまとめているブログ「xheight」の中で時間とお金とクオリティのバランスについて述べた記事「Time vs Money vs Quality」を読んで、短い記事ながら「ほほーぅ」と思ったので意訳してみたいと思います。バランスの取り方は自分次第ですね。料金設定の見なおしをしてみるのもいいかも。 ↑私が10年以上利用している会計ソフト！ この時代、デザイナーはデザインをするだけでなく、それ以上のマルチスキルが求められます。マルチスキルーー例えばビジネス・営業担当、ロゴデザイナー、グラフィックデザイナー、Webデザイナー、Webデベロッパー、SEO専門家、現代のスーパーヒーローなどなど（最後のはなんか違う気がしますが、意味わかりますよね）。 しかしクライアントのこととなると、その点が注目されずにおわります。 通常、彼らは優
中小企業的Web担当者の育て方 | 企業ホームページ運営の心得
コンテンツは現場にあふれている。会議室で話し合うより職人を呼べ。営業マンと話をさせろ。Web 2.0だ、CGMだ、Ajaxだと騒いでいるのは「インターネット業界」だけ。中小企業の「商売用」ホームページにはそれ以前にもっともっと大切なものがある。企業ホームページの最初の一歩がわからずにボタンを掛け違えているWeb担当者に心得を授ける実践現場主義コラム。 宮脇 睦（有限会社アズモード） ホームページは需給のミスマッチを安価に解消できるツールです。たとえば、東京では転居や廃業などにより客の減った町工場の技術を、九州は小倉の企業が求めていることがあります。団塊世代の社長の引退にともない廃業するケースは、特に最近目立ってきています。両者をインターネットが結びます。マスメディアの広告費と比較すれば、ホームページにかかる費用など安いものです。だからこそ中小企業はもっともっとホームページを活用すべきだと…
今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。
みなさんこんにちは、カッシーです。 先日6月8日に26歳になりました。充実した26歳にできるよう頑張っていきます！ 今回は手軽に実践できる効率アップTIPSをご紹介したいと思います。 WEB業界のデファクトスタンダードっていうよりは僕が実践しているものがメインです。 こういう効率アップTIPSとかは共有してどんどん仕事の効率を上げれば ・コストダウン（人件費） ・定時に上がってアフターを楽しむ ・費用は下がるし仕事は早くできるしモチベーションは上がるはいいこといっぱい！ なんでどんどん情報をシェアしたいですね！ もしこんなのものあるよーって方はコメントなりtwitterなりメッセージ頂けると嬉しいです。 目次 ・WEBサイトの新規作成キットを利用する ・拡張機能を利用する ・コード共有・アセット ・よく使う単語は辞書に登録 ・素材や過去のデータは整理しておく ・効率の高いファイルの送受信
Web制作をする前にきちんとしておきたいお金の話し。 │ モノづくりブログ 株式会社8bitのスタッフブログです
株式会社8bitのスタッフブログです。こんにちは。株式会社8bitの高本です。 今回は以前からいつ書こうかとずっと思っていた、Web制作とお金にまつわるお話を書いてみたいと思います。 みんながみんなではないと思いますが、Web業界に携わっている方の大半は本当に良いデザイン、良いサイトを作りたい、という思いが強く、出来れば見積りや請求などのお金の話しには関わりたくない、縛られたくないという方が多いように思います。 どちらかというと私もお金の交渉からは、気持ち的にはできれば避けたいと思ってしまいます。 先日、さぶみっとというWeb制作マッチングサイトを先日見ていたのですが、契約や未払いの相談みたいなものが思いのほか多いのに驚きました。 https://hp.submit.ne.jp/qa いくら仲の良いお客さんでもお金の話しになるとシビアになりますし、支払い交渉はなんだか金金言って
10年後を生き抜くWeb業界の心得10か条 | JWDA通信 10年後のWEB業界でも役立つ情報を届ける
Webはいつしか、人と人、もしくは企業やブランド間のコミュニケーションをフォローするメインストリームとなってきました。スマートフォン、タッチパッド、キオスク端末、ゲーム機などが世に輩出され、これまで端末ごとに完結していたサービスやデータ、情報もついにユナイトし始めました。Web業界においても、1つの流れがここで集結し、新たなステージへパラダイムシフトしています。そんななか、Web制作者のみなさんに伝えたいメッセージがあります。 Web制作の領域 と問われると、サイト構築ではコーポレート・ブランドサイト制作、ECサイト制作、ケータイサイト制作、プロモーションサイトやバナー制作などが挙げられます。さらに、メールマガジンなどのメールマーケティング、アクセスログ解析や市場調査、マイニングをはじめとしたマーケティングの分野も関係し、ブランディング、クロスメディア戦略、ビジネス戦略なども除外できません
サイトのデザインは54%が「好みで決定」、27%が最後に上司にひっくり返され、90%は消費者の意見を参考にせず／デザイン決定プロセス調査 | Web担当者必見！ リサーチ データ&市場調査レポート
参考意見としてターゲット消費者の意見を取り入れているのは10%に過ぎず、90%が消費者の意見を聞かずにデザインを決定している。 デザイン決定のポイントは、「発注側の経営者・上司・担当者の好み」が54%。「サイト制作のゴールを達成できそうだから」（20.7%）の倍以上の割合で「好み」を優先。 27.3%が「発注側の経営者や上司の独断的な意向で最終決定の直前にデザインがひっくり返った」ことで困った経験がある。 これは、デザイン決定のプロセスをビジネス目的に対して最適化するための消費者評価（アンケート）ソリューション「CREATIVE SURVEY」を提供する株式会社フォーデジットとWeb担当者Forumは、共同で行った、「Webサイトのデザイン決定プロセスに関する調査」の結果のハイライトだ。 この調査は、企業サイトの制作において、デザイン決定がどのように行われているのかを調べることで、ビジネス
CMS選びにおけるリスク回避のためのチェックポイント: 世界中の１％の人々へ
2010年12月| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 (cc)Cherrylynx 汎用CMSは機能が似たように見えて目的に応じ得手不得手がある 理由あって100～300万円までの予算に適切なCMS(Content Management System)を調べているのだけど、WikiPediaから追って調べているとキリがないし、すべてをインストールする気力もない。ひとまずサイトで説明を読むのだが、どのCMSの説明読んでも「何をいまさら」感がして独自性に乏しい。 とはいえ、何が最適かは目的や環境によって違うのでCMS選びはチェックポイントをもうけて確認する必要があると思います。 ということで、今日のブログではCMS選びで注意することを書きたいと思います。 笑い話
サイトを公開する際に最低限抑えておきたい Apache の設定 | バシャログ。
こんにちは nakamura です。最近トルシエさんテレビ出すぎじゃありません？ウィイレヤロウヨ。オフサイドダヨ！ さてさて今回は意外と知られてないけど、サイトをインターネットに公開する際には知っておいた方が良い Apache の設定をいくつかご紹介します（一部 PHP の設定もありますが）。この設定をしていないからといって即危険にさらされるという訳でもありませんが、リスクの芽は摘んでおくに越した事はありませんよね。 無駄な HTTP ヘッダを返さない ディストリビューションにより異なるかもしれませんが、CentOS デフォルトの設定の場合 Apache が返してくる HTTP ヘッダは以下のようなものです。 HTTP/1.1 200 OK Date: Mon, 05 Jul 2010 01:01:14 GMT Server: Apache/2.2.3 (CentOS) X-Powered
WEBサイトの構成図を作成できるオンライン ソフト「SlickPlan」HTML、PDFで共有可能 - WEBマーケティング ブログ
WEB サイトの構成図 を作成するソフトとして使えるのはマインドマップ作成ソフトですが、多機能なだけに重かったり、サイトマップを作成するのにオプションの設定が必要だったり、毎度テンプレートを探したりと、あまり手軽ではないと思います。 そんなサイト 構成図 をサクッと作って提示、共有したい時に便利なオンライン ソフトをご紹介します。 2009/12/25追記：今日現在、日本語が文字化け、PDF形式でのエクスポートが行えなくなっています。この件につきまして、@kira88が運営元へフィードバックをしてくださいました。お知らせいただき、ありがとうございますｍ（＿ ＿）ｍ 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! サイトの構成図をサクッと作れるオンライン ソフト「SlickPlan」「SlickPl
押さえておきたいポータルサイト作成手法 - [jp.seo] SEO研究室 SEOとウェブデザインの研究ブログ。
以前、SEO対策に力を入れすぎたファンサイトで紹介した松葉れいなが大鶴義丹と結婚したこともあり、何故かうちのサイトのアクセス数が伸びました。 もちろん原因は上の記事なわけだけど、もうファンサイトが上に来るようなことはないみたいですね。 ブログを頻繁に更新し、いろんなキーワードを使うことで、ニュースに便乗して予想外のアクセス数を出すことがあります。 １つのキーワードに固執しないサイト作りをすることがアクセスアップを図る上でも重要なことなのかもしれませんね。 そう考えればやはりポータルサイトの存在意義はさらに高くなります。 検索エンジン→ポータルサイト→目的のページ この流れは一見無駄に見えます。 ポータルサイトを経由する必要性がいまいち見えないからです。 ただ、大きなポータルサイトには莫大な情報が眠っています。 それを経由することで、１つの情報をとりにいった閲覧者が、それに付随した複数の有益
サイトのリニューアル時にチェックすべき10項目（後編） | Moz - SEOとインバウンドマーケティングの実践情報
この記事は、前後編の2回に分けてお届けしている。サイトのリニューアル時にチェックすべきポイントの4番目までお伝えした前回に引き続き、今回は5番目以降の項目を見てみよう。 5.すべてのコンバージョンの終点を見直す間違いなく、リニューアル後のサイトはビジネス上の利益につながるユーザーの行動を促すすばらしい起爆剤となってくれるだろう。そこで起こるコンバージョンは、（当然）どこかで追跡されることになる。そこで、こういったコンバージョン追跡したり報告したりする部分を、もれなく見直すことをお勧めする。たいていの場合、解析プログラムの中でコンバージョンの終着点や流入経路となるURLを設定しているはずだから、これらをきちんと設定し直す必要がある。さもないと、サイトでコンバージョンが発生しなくなったように見えてしまうだろう。 グーグルアドワーズ広告を利用してWebサイトにトラフィックを誘導しているのなら、コ
SEOの手引き：ドメイン移転の正しい手順 | Moz - SEOとインバウンドマーケティングの実践情報
ドメイン名の移転は、検索順位に相当な悪影響を及ぼすことがある。というのも、主要な検索エンジンが順位を決定するのに使用している指標には、ドメイン名レベルのものととページレベルのものがあるからだ。このことを知っていようといまいと、新規ドメイン名への移転を決めたとき、ウェブマスターはドメイン名レベルの指標を0にリセットしてしまうことになる。幸い、こうしたドメイン名移転の影響を最小限に抑え、多くの場合は影響がほとんど出ないようにできる手順がある。 SEOの手引き：ドメイン名移転の正しい手順課題すべてのページを1つのドメイン名からまったく別のドメイン名にリダイレクトする。 結果の具体例「www.example-old-site.com/」とそこに登録されているすべてのページを、「www.example-new-site.com/」、およびそのドメイン名上の対応ページにリダイレクトする。 旧ドメイン名
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.cmmntr.com/m/58
app-life.jp
全てのWeb開発者必見!!! いろのはなし - How We Hear