それなりに使える、Web制作者がお世話になる便利ツール | コムテブログ

2016/01/04 581 users 便利ツール WEB制作者 お世話

毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいで... 続きを読む

1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ | コムテブログ

2015/08/10 941 users チートシート 完結 ワンクリック テンプレート WEB制作者

ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．... 続きを読む

Web制作者はおさらいしたい！CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ

2015/03/22 615 users CSS 勉強 WEB制作者

実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済むCSSテクニックなどをまとめました。今回はWeb制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 もくじ 画像 １．画像の下にできる隙間をなくす ２．画像の下にテキストが回り込まないようにする ３．floatを使わずに横並び ４．デバイスによって、画像を変更する ５．画像の上に文字を配置 ６．鏡像 マ... 続きを読む

意外となかった！Web制作者が助かるヒアリングシートや問い合わせ返信に使えるテンプレート | コムテブログ

2015/01/04 515 users テンプレート ヒアリングシート WEB制作者

遠方のお客様からのサイト制作依頼、メール問い合わせがあった時に、どんな内容を返信すればよくて、どんなことを聞いておけば概算見積もり（初期費用・ランニング費用）を作りやすくなるのか。ヒアリング時も、ある程度聞き出したい。 ネットや本でも意外と「具体的な例」がないなぁと思い、今回はコーポレートサイトやECサイト制作依頼があった時に、メール返信や、最低限クライアントに聞いておきたいことや尋ね方をまとめま... 続きを読む

知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 | コムテブログ

2014/11/09 651 users CSS小技集

今回はCSSのみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたいCSSテクニックです。 もくじ 画像 １．キュレーションサイト風のランキングボタン ２．画像の右上に三角形の要素を配置する ３．透過ネオンカラー ４．画像の表示範囲を指定 ５．透過させながら画像を合成する ６．マスクをかける 簡単に要素を並べる ７．左右に分割して区切り線... 続きを読む

今風になった！Web制作で使える最近のjQueryプラグインまとめ | コムテブログ

2014/10/14 762 users jQueryプラグインまとめ Web制作

比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 もくじ 動き １．ジオメトリック 背景 ２．フルスクリーンでスライドさせる ３．ドロアー風ライトボックス ４．動画を... 続きを読む

知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック | コムテブログ

2014/07/14 553 users CSSテクニック Web制作時 マルチカラム 半透明 段組み

少し前にサイト制作でさりげなく使われているCSSテクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 もくじ 画像 １．ブレンドモード ２．表示範囲 ３．透過＋合成 ４．半透明 エフェクト ５．マウスオーバーアイデア一覧 ６．CSSのみでメニューアイコン 段組み ７．マルチカラム ８．段の表示順 ９．コンテンツ流し込... 続きを読む

センス上がった！タイプ別に分けたWebデザインの参考になるサイトまとめ | コムテブログ

2014/06/30 606 users センス webデザイン 参考 タイプ別 コーポレートサイト

サイトのデザインセンス、または操作性などが良いのか悪いのかわからない。 オシャレで洗練されたデザインにするため、少しでもセンスを上げるために色々なサイトをチェックしておきたい。 今回はただWebデザインギャラリーサイトを紹介するのではなく、ページ別・職種・動き・制作別など「サイト制作時に役立つ」くくりでまとめました。コーポレートサイトやECサイト・自社サービスのデザイン考えるとき、提案前に一度は見... 続きを読む

Web制作者が捗る！知識が増える2014年トレンドまとめ | コムテブログ

2014/06/09 825 users 知識 WEB制作者

トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。 もくじ ファーストビューで使いたいエフェクト １．ロングシャドウ ２．ポリゴン ３．ラージフォトスタイル ４．ブラーエフェ... 続きを読む

プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック | コムテブログ

2014/06/02 718 users CSSテクニック プロ

WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブ... 続きを読む

見栄えがよくなった！Web制作するなら知っておきたいjQueryプラグインまとめ | コムテブログ

2014/05/07 529 users 見栄え jQueryプラグインまとめ web

ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ？」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。 もくじ メニュー １．フィーチャーリスト ２．スティッキーヘッダー 画像エフェクト... 続きを読む

すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ | コムテブログ

2014/04/21 1179 users CSSテクニックまとめ サイト制作

前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ... 続きを読む

知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ | コムテブログ

2014/04/07 838 users jQuery プラグイン 使い方まとめ

あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動す... 続きを読む

スキルが増えた！今後を生き抜くためにＷｅｂデザイナーも習得しておきたい技術 | コムテブログ

2014/03/17 764 users Webデザイナー スキル 技術 ライティング ライバル

クライアントさんの依頼やクラウドソーシングでもライティングや撮影依頼の需要が増えてきました。コンテンツファーストの時代になり、ライターだけじゃなく「コンテンツを作れる」デザイナーやエンジニアは、今後100%重宝されます。今回はフリーでも活躍できるように、ライバルのデザイナーさんと差別化できるように「コンテンツ作成」もできるデザイナーになるためのスキルをまとめました。 もくじ コンテンツ設計 １．イ... 続きを読む

ひとりでWeb制作できた！Webデザインの勉強にもなる独学「スライド」総まとめ | コムテブログ

2014/02/24 1231 users 独学 スライド もくじ Web制作 勉強

デザインの流れや基本的なフローなどを勉強しておくだけでも効率が良くなるし、起業の際にも役に立つと思います。デザイナーさんにもっとデザイン力を上げたいと言われたのもあり、今回は制作フローとデザインやその他の知識を学べるように、出来るだけ制作フローにそって、スライドをまとめました。膨大な量になったので簡潔にしています。全てスライドです。 もくじ サイト設計／構成 １．要件定義 ２．企画提案 ３．情報設... 続きを読む

すごい役立った！Web制作に特化した「提案書」に入れておきたいこと、知識 | コムテブログ

2014/02/03 662 users Web制作 知識 提案書 サイトリニューアル バックアップ

提案書に必ず書いておきたいことを順を追ってメモしました。イメージはブログ用なので簡易的なものとなっています。フローや内容は会社によって違うと思います。 もくじ サイトリニューアルの提案 自社分析によるサイトの問題点とその解決策 見やすさ、管理しやすさへの主な工夫 サイトレイアウト案（トップページ） フロント画面＋管理画面 イメージ 保守＋運用 セキュリティ面でのご提案 バックアップと緊急時の対応 ... 続きを読む

完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress) | コムテブログ

2014/01/27 895 users コーディング 一連 入稿データ フロー コーディング前

前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ... 続きを読む

フリーも社内も助かった！Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ

2014/01/19 2548 users Web制作フロー 資料 フリー まとめ 社内

受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 もくじ オリエンテーション／受注前 １．書類テンプレート一式 ２．見積もりの目安と計算方法 サイト設計／受注後 ３．ディレクトリマップ ４．ワイヤーフレーム ５．ユーザビリティ／UX設計 デザイン基本設計 ６．配色設定 ７... 続きを読む

効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ

2014/01/06 1072 users 職種別 基礎 webデザイン ワイヤーフレーム フォント

Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配... 続きを読む

すごい便利になった！javascript入門の基礎知識と小技まとめ | コムテブログ

2013/12/24 1095 users JavaScript入門 基礎知識 リファレンス 小技まとめ

サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベ... 続きを読む

作業効率あがった！Photoshopの使い方と小技まとめ | コムテブログ

2013/12/02 719 users Photoshop ハンティング 作業効率 小技まとめ 使い方

画像補正するときに、どうすれば良かったのか思い出せない。またあの方法を探し出さないといけない。そんなこんなで、Photoshopの便利な小技や、写真に関する知識をまとめました。 もくじ 画像補正 １．覚えておくと便利な小技 知っておきたい基本知識 ２．被写界深度（ひしゃかいしんど） ３．バンディング（トーンジャンプ） ４．白とび・黒つぶれ ５．ジャンプ率 ６．視覚度 ７．角版／切り抜き版の使い方 ... 続きを読む

知っておくと速い！CSS3に関する「便利」なまとめ | コムテブログ

2013/11/25 642 users CSS3 まとめ

先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「知っておくと効率的」なものをまとめました。 もくじ 知っておきたいプロパティ １．カウント数を出力 ２．要素の前後に文字や画像 ３．カーニング ４．画像フィルタ ５．均等幅にレイア... 続きを読む

プロっぽくなった！フォントや「文字」に関するまとめ | コムテブログ

2013/10/28 716 users フォント 字詰め 文字 行間 プロ

先週、合同商談会があったのでバタバタとリーフレット作ったんですが、字詰めなどに慣れてなくて時間をとられました。サイトをリニューアルするときもフォントの大きさ、行間、位置などで悩んだり。今回はWebページを読みやすく、見栄え良くするために「文字」に関する知識をまとめました。 もくじ フォントに関する知識 １．字間 ２．行間 ３．字詰め ４．文字組 ５．ジャンプ率 ６．余白／図版率 ７．メリハリをつけ... 続きを読む

効率あがった！フリー素材と「すごい」Illustratorテクニック総まとめ | コムテブログ

2013/10/21 1036 users フリー素材 チュートリアル 沢山 ロゴ イラスト

フリー素材は沢山あるけれど、どこに何があるか分かりにくい。ロゴやイラストを作るのにまたあのサイトを探さないといけない。そういったことで１回まとめました。今回厳選したつもりですが、それでも量が膨大になったので簡潔にリストアップしてます。 もくじ フリー素材まとめ ダウンロードしておきたいフリー素材一覧 Illustrator のチュートリアル 小技 基本テクニック フリー素材まとめ ダウンロードして... 続きを読む

見栄えが良くなった！CSSやHTML５の役立つ総まとめ | コムテブログ

2013/10/15 691 users 見栄え CSS EC-CUBE CMS SEO

先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 もくじ ... 続きを読む