ひとりでWeb制作できた！Webデザインの勉強にもなる独学「スライド」総まとめ作成：2014/02/24 更新：2016/06/30 Webデザイン > デザインの流れや基本的なフローなどを勉強しておくだけでも効率が良くなるし、起業の際にも役に立つと思います。デザイナーさんにもっとデザイン力を上げたいと言われたのもあり、今回は制作フローとデザインやその他の知識を学べるように、出来るだけ制作フローにそって、スライドをまとめました。膨大な量になったので簡潔にしています。全てスライドです。 エンジニア速報は Twitter の@commteで配信しています。
UX・UI・IAやアクセシビリティの「専門知識」が増えるまとめ - コムテブログ
TL;DR コーディングやシステムは分かるけど、最終的に使いやすい設計やクライアントさんが納得するようなデザインにならない。納品後に使いにくい箇所があると言われる。そうなる前に「何となく進めない」ようにサイト制作やサービス・アプリを作成する前の段階で知っておきたい知識。UX・UI・IA の違いが漠然としているときに。 IA（情報アーキテクチャ） １．基礎知識 情報アーキテクチャとは Web サイト全体の設計図、情報を分かりやすく伝えること。主にＩＡ（インフォメーションアーキテクト）が担当します。国内ではディレクターが担当する会社も多いと思います。情報アーキテクチャはサイトを見た目の印象だけでなく、目に見えないサイト構造をデザインすることで、わかりやすいサイトにする技術。 [スライド] 社内の IA（情報アーキテクチャ）研修の講師をしてみた。：そのフォローアップ | future-proof
知っておいて良かった！サイト制作後も助かる保守方法まとめ
作成：2014/02/10 更新：2014/11/01 ディレクション > 今回はサイト制作後からの保守について、どんなものがあるのか、どういった知識を身についておくべきか書きます。安定収益源にしていくために「作って終わりにしない方法」をメモしておきます。フリーランスや起業前にチェック。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 保守、運用ガイドライン ０．保守、運用ガイドライン 解析レポート １．事前に行うべきツール設定ポイント ２．時間帯からユーザーを推定する方法 ３．コメントの書き方 ４．日次・週次・月次チェックポイント ５．購入レポート サーバー保守 ６．FTP+DoS攻撃対策 ７．リソース監視 ８．セキュリティ監視 ９．データバックアップ SEO保守 １０．SEOレポートの書き方 １１．ウェブマスターチェック １２．指南書の書き方 広告出稿代行
すごい役立った！Web制作に特化した「提案書」に入れておきたいこと、知識
作成：2014/02/3 更新：2014/11/01 ディレクション > 提案書に必ず書いておきたいことを順を追ってメモしました。イメージはブログ用なので簡易的なものとなっています。フローや内容は会社によって違うと思います。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイトリニューアルの提案 自社分析によるサイトの問題点とその解決策 見やすさ、管理しやすさへの主な工夫 サイトレイアウト案（トップページ） フロント画面＋管理画面 イメージ 保守＋運用 セキュリティ面でのご提案 バックアップと緊急時の対応 サイトマップ案 強み、実績、事例 スケジュール サイトリニューアルの提案 企画提案書の流れをメモしておきます。実際に提案するときは、ポイントをおさえて簡潔に説明していきます。必要な部分だけピップアップして使います。 自社分析によるサイトの問題点とその解決策
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人
効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ
作成：2014/01/6 更新：2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配色 ９．Illustratorの使い方 １０．Photoshopの使い方 １１．バナー作成 １２．ボタン作成 フロントエンドエンジニア １３．HTML5 １４．CSS3／Sass １５．javascript １６．jQuery １７．WordPressテー
すごい便利になった！javascript入門の基礎知識と小技まとめ
作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ
作業効率あがった！Photoshopの使い方と小技まとめ
作成：2013/12/2 更新：2014/11/01 無料素材 > 画像補正するときに、どうすれば良かったのか思い出せない。またあの方法を探し出さないといけない。そんなこんなで、Photoshopの便利な小技や、写真に関する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 画像補正 １．覚えておくと便利な小技 知っておきたい基本知識 ２．被写界深度（ひしゃかいしんど） ３．バンディング（トーンジャンプ） ４．白とび・黒つぶれ ５．ジャンプ率 ６．視覚度 ７．角版／切り抜き版の使い方 ８．画像フォーマット 使い方 ９．基本的な機能の使い方 画像補正 １．覚えておくと便利な小技 写真をPhotoshopで補正するときに役に立ちそうな小技をまとめました。異色なものもありますが、筆者が良くアクセスしてしまうもの一覧です。 ゴミを発見する／微細なロー
知っておくと速い！CSS3に関する「便利」なまとめ
作成：2013/11/25 更新：2014/10/24 Webデザイン > 先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「知っておくと効率的」なものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 知っておきたいプロパティ １．カウント数を出力 ２．要素の前後に文字や画像 ３．カーニング ４．画像フィルタ ５．均等幅にレイアウト ６．アニメーション一覧 スマホサイト対策 ７．viewport ８．改行削除 ９．Webクリップアイコン １０．UIリセット／入力フィールド拡張 １１．横並び １２．ボタンサンプル １３．画像を使わない矢印 １４．自動改行 １５．はみ出しを隠す １
続編/さらにプロっぽくなった！フォントに関するまとめ
作成：2013/11/11 更新：2014/10/24 Webデザイン > 前回フォントや「文字」に関するまとめを書きましたが、書き足りないことが結構あったので、続編を作りました。今回は自分の勉強もかねて、フォントに関する基礎知識、アキ、段組み、詰め、図版などデザインに携わるなら知っておきたい知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 文字の基礎知識 １．文字用語 組版 ２．組版(くみはん) ３．禁則処理 ４．追い込み／追い出し／ぶらさがり ５．段間 行間(レディング) ６．アキ ７．行長 ８．段組み ９．黄金比 詰め １０．プロポーショナル詰め １１．音引き １２．拗音(ようおん) １３．合成フォント 余白 １４．近接と遠隔 １５．版面（はんづら） 図版 １７．図版率 １８．訴求度 文字の基礎知識 １．文字用語 頻繁に出てくる、ちょ
プロっぽくなった！フォントや「文字」に関するまとめ
作成：2013/10/28 更新：2014/10/24 Webデザイン > 先週、合同商談会があったのでバタバタとリーフレット作ったんですが、字詰めなどに慣れてなくて時間をとられました。サイトをリニューアルするときもフォントの大きさ、行間、位置などで悩んだり。今回はWebページを読みやすく、見栄え良くするために「文字」に関する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フォントに関する知識 １．字間 ２．行間 ３．字詰め ４．文字組 ５．ジャンプ率 ６．余白／図版率 ７．メリハリをつける ８．書体 ９．読みやすいフォントサイズ １０．見やすい文章 １１．Webフォント スライド １２．フォントに関するスライド フォントに関する知識 １．字間 字間とは文字と文字の間に生まれる空間。文章の行間・送り、漢字とひらがなの字間など文章レイアウト
html/css 参考サイト総まとめ
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
完璧に分かる！「google アナリティクス」の得する設定と使い方まとめ３１
作成：2013/09/24 更新：2014/11/01 SEO対策 > 毎月、ECサイトや情報サイトなどアクセス解析保守を9社ほど作らないといけません。ここらでおさらいを兼ねて、Googleアナリティクスを扱ううえで必要なことを整理しようと思います。今回は成果を上げるうえで「知らないと損する」ことをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 外部連携（初期） １．複数サイトを一つで管理 ２．すべてを一元管理 ３．ウェブマスター連携 ４．AdWords連携 ５．アドセンス連携 共通設定（初期） ６．プロファイル ７．フィルタ ８．IP除外 ９．Cookie除外 トラッキング設定（初期） １０．トラッキング設定 １１．時間／曜日／日付 １２．集客／キーワード／ページ １３．流入／属性／閲覧開始／トレンド 計測方法と基本知識 １４．ディメンション
ガッツリ改善した！ECサイトの売上がアップするLPO／EFO／広告／PLAなどまとめ
作成：2013/09/17 更新：2014/11/01 SEO対策 > 先月、クライアントさんに「PVとかどうでもいいから、成約数を増やしてくれ」とお願いされました。もちろん予算は先月と同じです。競合調査、リマーケティングやLPOの改善で、クリック率1.2%→3.8%、コンバージョン150%にアップ。来月も参考にしたいので、今回は「成約率を上げる」為に参考にしたサイトを中心にまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 最適化のコツ １．EFO／エントリーフォーム最適化 ２．MEO／googleマップで上位表示 ３．PLA／商品リスト広告 ４．LPO／ランディングページ最適化 クリック率の上げ方 ５．広告原稿のクリック率を上げる ６．クリックされるボタンの色 キャッチコピーの作り方 ７．広告の書き方 成果を上げるレイアウト ８．料金プランの見
意外と簡単！GoogleDriveで「解析、社内ツールや保守レポート、勤怠管理」などを作成できる総まとめ
意外と簡単！GoogleDriveで「解析、社内ツールや保守レポート、勤怠管理」などを作成できる総まとめ 作成：2013/09/2 更新：2014/11/01 ディレクション > 社内ツールや、解析タイムスタンプなどGoogleDriveで管理しています。今回は、スプレッドシートで社内ツールや保守レポート、勤怠管理など様々なスクリプトや関数の使い方や使用例をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ Google Analytics １．自動集計／解析保守レポート 取得 ２．ブログ記事毎のツイート数、いいね数、はてブ数を取得 ３．Googleサジェストの結果を取得する 社内フォーム ４．テンプレート／旅費精算、物品、休暇届など ５．勤怠管理 ６．コード管理、ユーザーへの配布システム ７．ガントチャート、ToDoリスト ８．問い合わせフォーム
オフィスはいらない！社内業務や日常生活に役立つサービス１７
作成：2013/08/19 更新：2014/11/01 Webサービス > 案件管理や進捗確認、打刻や勤怠管理など社内で共有するファイルはクラウドで管理します。数年前と比べると、よほど重要なものでない限り、ローカルに保存することが少なくなってきました。今回は、社内ツールや日常生活にも使える、できるだけ無料で使える物を中心にまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 転送 １．ネット郵便 ２．ネットFAX ３．ネットプリント ４．ファイル転送 ５．フォーマット変換 交通／宿泊 ６．タクシー／ホテル／航空券／新幹線／駐車場 進捗 ７．ガントチャート ８．タスク管理 証票 ９．見積/請求書/会計/他 １０．税金 オフィスツール １１．オンラインオフィス＋ストレージ １２．マインドマップ １３．グラフ マーケティング １４．競合調査 １５．アンケー
知識０なのにすぐ出来た！iPhoneアプリ開発が簡単にできるまとめ１６
作成：2013/08/12 更新：2020/01/06 Web制作 > 去年、アプリをリリースしました。アプリに関する知識など全くなかったんですが、意外と簡単に出来るもんだなぁと思いました。その時はアプリを作った後、登録関係や広告など時間を取られたり、調べるだけで時間がかかったので、今回はアプリを開発するときに知っておくと素早く先に進める、作って終わりにならない「収益を発生させるまで」をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 基本 １．予備知識と事前準備 ２．実践 ３．証明書／アクティベーション ４．Objective-C リファレンス ５．iPhone5に対応させる ６．プログラムがいらないツール 制作 ７．デザイン ８．素材 ９．UI作成ツール １０．解像度／チートシート 申請／登録 １１．アプリ申請／リジェクト回避 １２．アプリ登
企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ | コムテブログ
TL;DR クライアントさんとの打ち合わせや会議の後は、必ず議事録を書いて社内共有します。座った位置や発言なども、思い出しながら簡潔に書きます。おかげで「何を話したっけ？」「言った、言わない」を防げてます。フリーランスの人は、見積書、請求書、契約書、法律などのテンプレや知識があると、スムーズに先へ進めます。その他、ヒアリングシート、契約書など Web 制作業でリアルで必要だった書類系テンプレや知識をまとめました。 企画／提案 １．企画書 企画書はどれくらいのコストで効果（売上）を得るかというのが一番大切。とはいえ、上司を説得できる企画書も大切。以下は企画書の作り方と資料作成サービスなどのまとめです。 [保存版] 最強の企画書の作り方と資料作成サービス完全まとめ | 世界ろぐ “通る企画書”作りの基本／上司を説得できる企画資料の作り方講座#1 | Web 担当者 Forum ２．提案書 提案
ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７
作成：2013/07/22 更新：2014/11/01 Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「０」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
