タグ

ブックマーク / commte.net (14)

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

    作成:2014/01/27 更新:2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 1.仕様書の確認 2.入稿データの確認・スケジューリング HTML5 マークアップ 3.テンプレート作成 4.条件付きコメント 5.GCF+キャッシュクリア 6.OGP記述 7.ファビコン 8.アウトライン作成 9.バリデーターをチェック CSS の設定 10.ノーマライズスタイル レスポンシブデザイン設計 11.モバイルファーストを基準に設計 12.プログレッ

    完璧に分かる!コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
    gambol
    gambol 2016/10/18
  • gulpの使い方 Win/Mac対応

    作成:2015/06/22 更新:2018/05/27 Mac > Web制作 Web制作に欠かせなくなった「Node.js」。デザイナーさんやフロントにおいてもgulpの環境を整えるのがトレンドとなっています。 node.js やgulpを何に使うのか分からないけど、まだインストールしてない、もしくは入れなおしたい、何となく流れを知っておきたいという人向けに、ザックリと「初歩的な部分を数時間で使える」ための手順をメモしておきます。Win/Mac対応。 エンジニア速報は Twitter の@commteで配信しています。 もくじ Node.jsとは Node.jsをインストールする Mac版バージョン管理ツール:nodebrew Windows版バージョン管理ツール:nodist パッケージマネージャー npmの使い方 gulp(ガルプ)のインストールと使い方 Node.jsとは ご存知な

    gulpの使い方 Win/Mac対応
    gambol
    gambol 2016/03/30
    ”何も付けない:現在作業を行っている場所。./node_modules”
  • Web屋が使う34個の「シンプル・簡単・便利」なウェブツールまとめ

    作成:2012/10/29 更新:2016/10/22 Tool > 低スペックPCやウィンドウ幅の狭いノートを使っている場合、ソフト立ち上げを躊躇してしまう時がありませんか?そんな人に「シンプル、軽い、簡単」のウェブ上で使えるツールをご紹介。ブラウザ内で開けるので無駄なスペースを取られません。 ※こちらの記事は2012年に書いたもので、情報が古くなっております。比較的最近のツール系のまとめは、Web制作に役立つトレンドのツール一覧と以下の2つご覧ください。(※ 2015/06/25 2015/06/28追記) Node.jsとgulpをインストールして使うまでの入門記事 これからGit を始めてみようという人のための使い方と入門フロー 特にウェブ屋さんやブロガーさん達が使っているのをピックアップ。 もちろん僕も頻繁にガシガシ使ってるので「ツール用ブックマーク」としてこのページを作りました

    Web屋が使う34個の「シンプル・簡単・便利」なウェブツールまとめ
  • Web制作者が助かるヒアリングシートや問い合わせ返信に使えるテンプレート - コムテブログ

    TL;DR 遠方のお客様からのサイト制作依頼、メール問い合わせがあった時に、どんな内容を返信すればよくて、どんなことを聞いておけば概算見積もり(初期費用・ランニング費用)を作りやすくなるのか。ヒアリング時も、ある程度聞き出したい。 ネットやでも意外と「具体的な例」がないなぁと思い、今回はコーポレートサイトや EC サイト制作依頼があった時に、メール返信や、最低限クライアントに聞いておきたいことや尋ね方をまとめました。ヒアリングシートにも応用できます。会社によって違うと思いますが、ざっくりとメモしておきますので、後は自分流にアレンジしながらご活用ください。 メール用テンプレート ここからはメール返信用です。 コーポレートサイト コーポレートサイトの制作依頼があった時に、具体的にどんな内容をヒアリング、または聞いておけばよいのか項目をまとめました。聞き出した内容をもとに社内スタッフと共有し概

    Web制作者が助かるヒアリングシートや問い合わせ返信に使えるテンプレート - コムテブログ
    gambol
    gambol 2015/01/05
  • Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ

    TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション/受注前 1.書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類(ヒアリングシート/企画書/提案書/業務委託書/見積書/契約書)など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ23 2.見積もりの目安と計算方法 例えば項目を作るとき1.項目/2.内容/3.設計(人日)/4.製造(人

    Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
  • メモしておきたい!サイト制作時に知っておくと「意外」と役に立つこと

    作成:2014/08/4 更新:2014/11/01 Web制作 > 今回はサイト制作において毎回使うこと、意外と面倒で忘れがちなものをメモしておきます。事前に知っておくことで効率的にコーディング、納品できると思います。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ドメイン+サーバ 1.独自ドメインでHPとgmail を運用させるまで 2.コマンド 3.IP制限 CSS 4.画像の回り込み 5.marginの相殺 6.ショートハンド 7.ビューポート設定 8.IEでCSS3を再現 IE対策 9.filter属性 10.条件付きコメント WordPress 効率化 11.keywordsとdescriptionを自動出力させる 12.記事中の最初の画像を自動検出して、表示 13.タイトルの文字数を自動でカットして、語尾に「…」をつける 14.管理画面 ドメイ

    メモしておきたい!サイト制作時に知っておくと「意外」と役に立つこと
  • ここまで出来る!覚えとくと便利な「プログラム」サンプルまとめ

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

    ここまで出来る!覚えとくと便利な「プログラム」サンプルまとめ
  • ひとりでWeb制作できた!Webデザインの勉強にもなる独学「スライド」総まとめ

    作成:2014/02/24 更新:2016/06/30 Webデザイン > デザインの流れや基的なフローなどを勉強しておくだけでも効率が良くなるし、起業の際にも役に立つと思います。デザイナーさんにもっとデザイン力を上げたいと言われたのもあり、今回は制作フローとデザインやその他の知識を学べるように、出来るだけ制作フローにそって、スライドをまとめました。膨大な量になったので簡潔にしています。全てスライドです。 エンジニア速報は Twitter の@commteで配信しています。

    ひとりでWeb制作できた!Webデザインの勉強にもなる独学「スライド」総まとめ
    gambol
    gambol 2014/02/24
  • 完璧に分かる!「google アナリティクス」の得する設定と使い方まとめ31

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

    完璧に分かる!「google アナリティクス」の得する設定と使い方まとめ31
    gambol
    gambol 2013/10/03
  • まず知っておきたい!初心者でも「アフィリエイト」で稼ぐまとめ28

    作成:2013/09/30 Web制作 > なぜあの人は残業しないのか、帰宅後なにをやっているのか。ブログを継続して書いている理由ってなんだろうか。アフィリエイト収益が業の収入を超えだすと、生活に余裕が出て気持ちも楽になります。まだ始めてない人、現状突破したい人、とにかく自分のちからで稼ぐと決めた人へ、初心者でも上級者でも一度チェックしておきたい記事をまとめました。アフィリエイトの他に副業に関する情報もあります。 エンジニア速報は Twitter の@commteで配信しています。 もくじ Adsense 1.収益を上げる広告配置 2.ターゲット設定 3.レスポンシブ/タグ改変 4.AdSense違反の直し方 動画で収益化 5.YouTube ブログサービス 6.はてなブログ スマートフォンアプリ 7.リンクタグ生成ツール 8.アプリ宣伝バナー 9.アイコン型広告の収益率 10.広告の実

    まず知っておきたい!初心者でも「アフィリエイト」で稼ぐまとめ28
  • 忘れた時に便利!「androidアプリ開発」に役立つすごいまとめ

    作成:2013/09/9 更新:2014/11/01 Web制作 > 去年、楽をしたくてTitaniumでiPhoneAndroidアプリを作ったものの、Androidの方は動作が重く失敗。しっかり、基礎から勉強しないとダメだと痛感しました。今回はjavaの初心者でも最短でアプリを出してみたい人、リリースした人でも様々な実装方法を見れるようにまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 環境/インストール 1.環境構築 2.端末実機にインストール 実装 3.画像 4.アニメーション 5.アラーム 6.計算機 7.音声 8.カレンダー 9.カメラ 10.加速度センサー 11.セキュリティ/パスワード 12.スクロール 13.ストップウォッチ 14.地図 広告/収益 15.広告/アフィリエイト 16.課金 環境/インストール 1.環境 Andr

    忘れた時に便利!「androidアプリ開発」に役立つすごいまとめ
  • 強面の社長が教えてくれた人たらしテク | コムテブログ

    地元の知り合いに人たらしのプロみたいな強面の社長さんがいた。風体はオールバックで髭を生やしがっちりしている。一見、一般人には見えない。 最近 SNS で見かけるような、インテリぶった貧弱そうな(男か女か分からないような)経営者ではない。背中に刃物を突き立てられても動じないような人で、事実開き直っていた。しかし何をやっても上手くいく強運な人だった。 最近連絡を取っていなかったが、その人に教えられた事を公開しようと思う。毒舌で失礼な文章なので気分を害しそうな人はスルーして下さい。 「飲み会不要」 付き合いが大切だと言う人間とは距離を置け。懇親会も出来るだけやんわりと断れ。人間関係は大切だが、賢い人間は皆が飲みに行く時間に不労所得を作る。 「成功者と失敗者の話しは聞くな」 すでに成功している人間や、うだつのあがらない人間の話はどうでも良い。それより頑張り屋さんに近づけ。実は頑張り屋さんに近づくと

    強面の社長が教えてくれた人たらしテク | コムテブログ
    gambol
    gambol 2013/07/30
  • 企画・提案・見積・納品・契約などのテンプレ・知識まとめ23 | コムテブログ

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

    企画・提案・見積・納品・契約などのテンプレ・知識まとめ23 | コムテブログ
  • 「副業や起業前」に知ると便利なツール・知識まとめ | コムテブログ

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

    「副業や起業前」に知ると便利なツール・知識まとめ | コムテブログ
    gambol
    gambol 2013/03/25
  • 1