作成：2014/01/6 更新：2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配色 ９．Illustratorの使い方 １０．Photoshopの使い方 １１．バナー作成 １２．ボタン作成 フロントエンドエンジニア １３．HTML5 １４．CSS3／Sass １５．javascript １６．jQuery １７．WordPressテー

作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ

作成：2013/11/25 更新：2014/10/24 Webデザイン > 先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「知っておくと効率的」なものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 知っておきたいプロパティ １．カウント数を出力 ２．要素の前後に文字や画像 ３．カーニング ４．画像フィルタ ５．均等幅にレイアウト ６．アニメーション一覧 スマホサイト対策 ７．viewport ８．改行削除 ９．Webクリップアイコン １０．UIリセット／入力フィールド拡張 １１．横並び １２．ボタンサンプル １３．画像を使わない矢印 １４．自動改行 １５．はみ出しを隠す １

作成：2013/10/7 Webデザイン > 保守レポート、請求書、競合調査、検索ボリュームなどもそうですけど、Web屋さんに限らず仮説の答えになるデータを探したり、お客さんの提出物や社内レポート関係も必ずエクセルをつかいますよね。今回は「こういう便利な使い方があったのか！」と参考になったサイトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング １．Dreamweaver ２．HTML生成 ３．正規表現／ソース編集／ニュース取得 ４．テーブルに変換 グラフ ５．グラフと表 ６．パイチャートやダイヤル ７．白黒印刷 ビジュアライズ ８．ガントチャート／ハイライト／擬似グラフ ９．表の罫線をテキストに変換 業務効率化 １０．作業スケジュール １１．入力と演算を分けて効率化 配色／フォント １２．綺麗にみせる配色ルール １３．フォント種類

作成：2013/10/28 更新：2014/10/24 Webデザイン > 先週、合同商談会があったのでバタバタとリーフレット作ったんですが、字詰めなどに慣れてなくて時間をとられました。サイトをリニューアルするときもフォントの大きさ、行間、位置などで悩んだり。今回はWebページを読みやすく、見栄え良くするために「文字」に関する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フォントに関する知識 １．字間 ２．行間 ３．字詰め ４．文字組 ５．ジャンプ率 ６．余白／図版率 ７．メリハリをつける ８．書体 ９．読みやすいフォントサイズ １０．見やすい文章 １１．Webフォント スライド １２．フォントに関するスライド フォントに関する知識 １．字間 字間とは文字と文字の間に生まれる空間。文章の行間・送り、漢字とひらがなの字間など文章レイアウト

作成：2013/03/25 更新：2013/06/02 Tool > Webサービス ※2013/05/22： 「開業」の前に読んでおくと得するまとめを追加しました。 副業や起業時にお金の管理はどうすればよいのか？ 個人事業と会社設立 どちらでいけばいいのか 会計や計画書、GoogleAppsから起業の心得まで 今回は副業や起業に使えるツールやサービスの使い方などをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．会計 ２．確定申告 ３．見積書 / 請求書 ４．事業計画書 ５．会社設立 ６．個人事業 ７．起業の心得 ８．GoogleApps活用法 ９．HP立ち上げ １０．名刺を自作 １１．マーケティング １２．利用規約の作り方 １．会計 僕の周りには起業家が沢山いますが、お金の流れや税金、管理方法などに関する内容が一番多い。しかし、起業して会

作成：2013/10/21 更新：2014/11/01 無料素材 > フリー素材は沢山あるけれど、どこに何があるか分かりにくい。ロゴやイラストを作るのにまたあのサイトを探さないといけない。そういったことで１回まとめました。今回厳選したつもりですが、それでも量が膨大になったので簡潔にリストアップしてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フリー素材まとめ ダウンロードしておきたいフリー素材一覧 Illustrator のチュートリアル 小技 基本テクニック フリー素材まとめ ダウンロードしておきたいフリー素材一覧 ロゴやイラストを作ったりするときに役に立ちそうなアイコン、ベクター、背景、テクスチャ素材をまとめました。少し変わったモノが多いですが、筆者が何度もアクセスしてしまうブクマ一覧です。 学校や教育関係／アイテム全200種類のアイコン素材 -

作成：2013/09/24 更新：2014/11/01 SEO対策 > 毎月、ECサイトや情報サイトなどアクセス解析保守を9社ほど作らないといけません。ここらでおさらいを兼ねて、Googleアナリティクスを扱ううえで必要なことを整理しようと思います。今回は成果を上げるうえで「知らないと損する」ことをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 外部連携（初期） １．複数サイトを一つで管理 ２．すべてを一元管理 ３．ウェブマスター連携 ４．AdWords連携 ５．アドセンス連携 共通設定（初期） ６．プロファイル ７．フィルタ ８．IP除外 ９．Cookie除外 トラッキング設定（初期） １０．トラッキング設定 １１．時間／曜日／日付 １２．集客／キーワード／ページ １３．流入／属性／閲覧開始／トレンド 計測方法と基本知識 １４．ディメンション

作成：2013/08/12 更新：2020/01/06 Web制作 > 去年、アプリをリリースしました。アプリに関する知識など全くなかったんですが、意外と簡単に出来るもんだなぁと思いました。その時はアプリを作った後、登録関係や広告など時間を取られたり、調べるだけで時間がかかったので、今回はアプリを開発するときに知っておくと素早く先に進める、作って終わりにならない「収益を発生させるまで」をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 基本 １．予備知識と事前準備 ２．実践 ３．証明書／アクティベーション ４．Objective-C　リファレンス ５．iPhone5に対応させる ６．プログラムがいらないツール 制作 ７．デザイン ８．素材 ９．UI作成ツール １０．解像度／チートシート 申請／登録 １１．アプリ申請／リジェクト回避 １２．アプリ登

作成：2013/08/5 更新：2014/11/01 Web制作 > 食材を扱っているお客さんから、「ECサイト」を作ってくれと頼まれたので作成しました（事情により、CMSは使えず）。さらにメンテンスが楽になるように更新やSEOを自動化しました。今回は、CMS（WordPressとかEC-CUBEなど）を使わず仕組みを作るときに参考にした「プログラムサンプル」のまとめです。 プログラムの勉強にもなり、「へぇ～こんなことも出来るんだ」と思ったもの。今回は（PHP／jQuery／js）です。 エンジニア速報は Twitter の@commteで配信しています。 一般 画像／PHP １．画像リサイズ ２．画像に字を書く ３．画像の拡大・縮小・サムネイル出力 ４．グラフの描画 ５．画像エフェクト２５個 URL／PHP ６．ページのURLを取得 ７．URLの中身（HTML）を取得 ８．URL自動リン

TL;DR クライアントさんとの打ち合わせや会議の後は、必ず議事録を書いて社内共有します。座った位置や発言なども、思い出しながら簡潔に書きます。おかげで「何を話したっけ？」「言った、言わない」を防げてます。フリーランスの人は、見積書、請求書、契約書、法律などのテンプレや知識があると、スムーズに先へ進めます。その他、ヒアリングシート、契約書など Web 制作業でリアルで必要だった書類系テンプレや知識をまとめました。 企画／提案 １．企画書 企画書はどれくらいのコストで効果（売上）を得るかというのが一番大切。とはいえ、上司を説得できる企画書も大切。以下は企画書の作り方と資料作成サービスなどのまとめです。 [保存版] 最強の企画書の作り方と資料作成サービス完全まとめ | 世界ろぐ “通る企画書”作りの基本／上司を説得できる企画資料の作り方講座#1 | Web 担当者 Forum ２．提案書 提案

作成：2013/07/22 更新：2014/11/01 Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「０」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ

作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana

作成：2013/05/7 更新：2014/11/01 Webデザイン > 無料フォントは星の数ほどあるけれど 結局どれを使ってよいのか、迷ってしまう 今回はシーンごとに使えるように、無料フォントをジャンル分けしました。まとめサイトをまとめてあるので、ほとんど揃うとおもいます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．有名企業やサイトのロゴ ２．プログラミング用 ３．アニメ / 漫画 / 映画 ４．漢字 / 日本語 ５．スタイリッシュ / 細字 ６．手書き １．有名企業やサイトのロゴ 企業・団体から有名なSNS、製品ロゴ。首都圏に乗り入れる鉄道会社が使用するフォントも網羅。 有名企業やサイトのロゴに使用されているフォントまとめ 東京の鉄道会社が何かと使用しているフォントまとめ 5r4ce2[Fiber Force2] pumpCurry's Webs

高額なフォトショップを持っていない人はこれだけでＯＫ！｜無料オンラインフォトエディター「Pixlr.com」 作成：2011/10/24 更新：2014/11/01 Tool > 様々なオンライン写真加工ツールがありますが、レイヤーが出来ない、日本語フォントに対応していないなどphotoshopには程遠く全く使うに至りませんでした。そんな最中、試行錯誤の結果とても使いやすかったものが決まりました。無料のオンライン写真加工ツールでフォトショップに一番近く使いやすいベスト1ツールをご紹介します。上記と下記の写真はレイヤーを使用する事で部分的に色を出した例です。 エンジニア速報は Twitter の@commteで配信しています。 pixlr.comによる手法： ①グレーに変換したレイヤーを一番上に重ね、色を部分的に消していく ②中心付近は大き目の消しゴムツールで色を消す ③境界線付近は小さめの

作成：2013/04/8 更新：2013/06/02 WordPress > 有料に匹敵するような無料のテーマを知りたい。 これからブログを始めようとしている人、新しいサービスを始めようとしている人も是非、ひと通り見ておきましょう。初心者の方はWEB制作を「はじめて」する人が分かるまとめをご覧ください。WordPressのテーマを見ておくと、現時点でのレイアウトで足りなかった部分を気づいたりすることができます。 少し時間はかかりますがSEO対策も簡単です。今回は無料のテーマやテンプレート、また作成方法などをご紹介します。素材は「WEB制作が「はかどる」素材まとめ」でどうぞ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．無料テーマ一覧 ２．WordPressの基本 ３．テンプレートタグについて ４．関数一覧 ５．固定ページ ６．アイキャッチ画像 ７．カス

作成：2013/04/15 更新：2013/06/02 SEO対策 > SEO対策とは、サイトやブログを検索エンジンの検索結果で、上位に表示させるテクニックや対策をあらわします。SEO(Search　Engine　Optimization)とは検索エンジン最適化のことです。上位表示は、大体の目安として10位以内を指します。2013年のSEO対策はサイト内の改善を行う「内部施策」が重要になってきました。 SEO（内部施策）において大切な「オリジナル記事」とは、独自で調査したことや、研究内容、統計結果を自分の言葉でライティングすることです。Googleはオリジナル性を重視しています。いかに個性的（ユニーク）な記事を書けるか、それが鍵となります。 今回は全く結果が出ない人に向けて「上位表示できないとき、あなたを助けてくれる」SEO対策ツール、サービスをまとめました。 競合調査や自分のサイトを解析

作成：2013/04/19 更新：2013/06/02 Tool > Webサービス 検索で上位を占めているサイトのページ表示速度を見ていると、1～2秒台が増えてきました。画像のファイル容量が大きいと、ページ速度が落ちるので当然SEOに良くありません。 僕もページ速度を早める為に色々試してますが、画像圧縮は高速化する上で一番簡単だと思います。 今回は、ブログやサイトを作るときに、「便利だな」と思った画像を圧縮するためのオンラインツールやフリーソフトをまとめました。この中から使いやすいのをチョイスしましょう。 エンジニア速報は Twitter の@commteで配信しています。 圧縮系のフリーソフト・サービス一覧 １．TinyPNG ２．PNG Minimizer ３．Compress PNG Images Online ４．PNGGauntlet ５．PunyPNG ６．JPEG Mini

作成：2013/04/25 更新：2013/06/02 lifestyle > シャットダウン後に電源ボタンを押して 15秒台でデスクトップ 18秒後にはChromeでGmailを見る 全てを（Windows・Mac）高速化しただけでブログの更新スピードも上がった。 泣けるほどノンストレスではないか。 そして、あの遅い「モッサリ」は一体何だったのか。 今回はパソコンが重いと感じたときにできることをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ Mac高速化 話題になった小技やソフト SSD(Mac)で爆速化させる Wi-Fi / DNSで高速化 Chrome / Firefox / Opera / IE 高速化 Windows高速化 Windows8/7/Vista(小技まとめ) SSD(Win)で爆速化させる Windows8/7/Vista

作成：2013/03/11 更新：2013/06/02 Webサービス > Webデザイン 少しでもいいから、自宅で空き時間を使って 生活を豊かにしたい 今回は自宅で出来るサービス、副業やフリーランスが知っておくと得する情報です。格安で仕事を発注したいときや、収入が発生したらどう対策するのか、その方法やサービス・考えなどをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 １．クラウドソーシング ２．Wordpress ３．Google AdSense ４．スマートフォンアプリ ５．確定申告 ６．Webサービス ７．フリーランス ８．Web関係 ９．フリーランスの考えなど １．クラウドソーシング クラウドは、時間や場所を選ばず、誰でも簡単に参加することのできるサービス クラウドソーシングならCROWD（クラウド） ロゴ / 名刺 / サイト構築 / 記事作