CSS Nite LP56「ウェブサイト制作、手を動かす前に考えておくこと ［Part II］」フォローアップ（6）枌谷 力さん | CSS Nite公式サイト
CSS Nite LP56「ウェブサイト制作、手を動かす前に考えておくこと ［Part II］」フォローアップ（6）枌谷 力さん 記事公開日：2018年9月11日（火） 2018年3月3日（土）ベルサール神田 イベントホールで開催したCSS Nite LP56「ウェブサイト制作、手を動かす前に考えておくこと ［Part II］」のフォローアップとして、枌谷 力さん（ベイジ）の『10人のweb制作会社が代理店に頼らず自社サイトだけで年間400件超の依頼を獲得するまでに実践したこと』セッションのスライドなどを公開します。 スライド（PDF）動画 フォローアップメッセージは、イベント開催直後（2018年3月）の時点のものです。 ベイジの枌谷です。初めてのCSS Niteでしたが、皆の温かい反応によって緊張しすぎずに登壇できました。ありがとうございました。 補足登壇テーマを深堀するにあたって2つの
フリーランスの人も知っておきたい！メールで要件やスケジュール、修正の内容をやり取りする時のガイドライン
Web制作に限らず、制作業界すべてのマネジメントにおいて、要件やスケジュールの確認、変更や修正内容の確認は、非常に重要なプロセスです。 広告関係4団体によって策定された、それらの内容を明確にし、確認書としてメールの書面をもって確認するためのガイドラインを紹介します。 広告関係4団体が「広告制作取引『受発注』ガイドライン」を策定 策定に加わった4団体は、下記の通り。 JAA 日本アドバタイザーズ協会 JAAA 日本広告業協会 JAC 日本アド・コンテンツ制作協会 OAC 日本広告制作協会 上記ページで、ガイドラインのPDFがダウンロードできます。 このガイドラインは制作費や納期などの発注内容を事前に明確にし、適切なスケジュール管理のもと業務管理を行い、受注/発注両者が長時間労働の抑制に取り組むことを目的としたものです。それらを「受発注確認書」として電子メールで取り交わすことをルールといたしま
デザインは一手間が大切！画像が見違えるほど魅力的になるデザインテクニックのまとめ
一枚の絵には千の言葉に匹敵する価値がある「百聞は一見にしかず」は、コミュニケーションデザインにおいても有効です。わたし達は今までの経験と研究の両方の側面から、画像が多くのユーザーの目を引きつけることを知っています。 自身で撮影した写真画像、どこかでダウンロードした画像に一手間加えて、画像を魅力的にデザインするシンプルなテクニックを紹介します。 画像を美しく仕上げる一番簡単な方法がこの「クロップ」です。クロップは不必要だったり気を散らすエリアを取り去ることで、構図を見直し、焦点を強調することができます。 【注意】クロップするエリアが大きい場合は、可能な限り大きい画像を使用します。これは切り取った後の画像が小さくなってしまうからです。小さいからといって拡大してしまうと、ピクセレーションが起きてしまい、汚い画像になってしまいます。 クロップする時に便利なのが、「3分の1ルール」です。このテクニッ
最近増えてきたFlexboxベースのCSSフレームワークをご紹介 | MONOCHROME DESIGN｜東京杉並のフリーランスWEBデザイナー。WordPressホームページ/ウェブサイト制作
最近レイアウトにFlexboxをベースにしたモダンなCSSフレームワークが出始めてきています。ここではFlexboxを採用したCSSフレームワークをご紹介します。 Flexboxとは まずFlexboxとはなんなのか、正式名称は「CSS Flexible Box Layout Module」と言うもので、ざっくり言うと「今までより簡単にレイアウトが組めますよ！」って事です。 ざっくりしすぎなので補足すると、今までレイアウトを組むときは、テーブルを使ったり、CSSのfloatを使ったりして組んでいましたが、横並びにするとレイアウトが崩れる、縦の高さを揃えるのが難しい、上下中央揃えをしようとすると面倒・・・と手間がかかりました。javascriptを使わないと出来ない場合もありWEBのレイアウトは結構不自由だったのですが、Flexboxによってそれが改善されます。 Flexbox自体の使い方は
Webオーサリングツールまとめ【ホームページ制作に使える・無料ツールあり】
Webオーサリングツールまとめ【ホームページ制作に使える・無料ツールあり】 Webオーサリングツールをまとめた記事です。フリー（無料）で使えるものからプロ向けの高価なツールまであります。Windows・MacのOS対応についても比較しているので、ご自身のPC環境にあったツールを見つけてみてください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 ホームページを制作をこれから始めたい！という方のためにWebオーサリングツールを紹介します。
1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ
作成：2015/08/10 更新：2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．Wordpress タグ タスクランナー ６．gulp ７．Bower JavaScript 代替言語／JST ８．TypeScript ９．CoffeeScript １０．Jade コーディング用 １１．Chrome 開発ツール １２．html5
Brackets おすすめエクステンション集・解説 - Qiita
Qiita上の内容を集約し、大幅に修正・加筆したものを本として出版しました。 →ブログ：Bracketsの解説書を出版しました 基本的な使い方 こちらにて別途紹介しています。 →Bracketsの機能紹介、使い方解説 →Bracketsショートカット集 カテゴリ一覧 必ず入れておきたいもの ソースコード関連-全般 ソースコード関連-HTML/CSS ソースコード関連-JS/PHP、その他 画像・デザインデータ連携系 挙動改善系 機能拡張系 という形でカテゴリ分けをしています。 ※各エクステンションまだまだ機能をフルに使い切れてないところもありますので、何卒ご容赦ください。。。 必ず入れておきたいもの Extensions Rating 拡張機能一覧画面において、ソート可能にしたり各エクステンションの作者のアイコン・DL数・スター数等の情報を表示してくれます。 これにより、拡張機能がとても探
Webサイト制作における受注形態って？そのメリットとデメリット | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのエリカです。 ディレクター連載「いいWebつくろう〜クライアントと制作会社〜」第4回のテーマは、Webサイト制作の受注形態についてです。 今回は、Webサイト制作にはどのような受注形態があり、その受注形態にはどんなメリット・デメリットがあるかをおさらいしていきます。新人ディレクターや、制作会社選びに悩んでいる企業のWeb担当者さまのお役に立てたら幸いです。 3つの受注形態「指名・相見積・コンペ」って？ 【1】指名受注 指名受注とは、発注するお客様が特定の制作会社を指名する形態です。 お客様と制作会社が話し合い、見積やWebサイトの要件定義がまとまって、双方の合意ができた段階で、正式受注となります。 メリット 制作以前の方向性を模索する段階から、二人三脚で考えることができる プロジェクトの動き出すスピードが早い デメリット 複数社の比較ができない 指名受注に適したプ
無料エディター「Brackets」にも恋に落ちた
先日から、Adobe提供の無料開発エディター「Brackets」を使っています。 僕はこれまで、Wordpressテーマの開発などは「恋に落ちるエディター」のキャッチフレーズでおなじみのSublime Text 3を利用してきました。Sublime Textは、そのキャッチフレーズ通りの素晴らしいエディターです。 けれど、初めてBracketsをインストールして少し使ってみた瞬間から、「これは！」と、Sublime Textを初めて使った時と負けないぐらいの衝撃を受けました。 Bracketsも、Sublime Textと同様拡張で様々な機能を追加できるようになっています。けれどまず今回はデフォルト機能だけで気に入った部分を紹介したいと思います。 Bracketsとは Bracketsは、HTML、CSS、JavaScriptで開発されているオープンソースコードエディターです。Window
10万円と100万円は何が違うの？Webサイト制作の価格設定で検討するポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ディレクターのともぞうです！ ディレクターによる連載「いいWebつくろう〜クライアントと制作会社〜」の第2回目のテーマ、はサイト制作をおこなううえでのお金の話です。 サイト制作を依頼する側も依頼される側も、判断が難しい「お見積り」です。ここだけは抑えたいというポイントをまとめました。 制作費が10万円のWebサイトと100万円のWebサイトって、いったい何が違うの？ まず、サイト制作と一口に言っても、その実現方法はさまざまです。複数のWeb制作会社に依頼して比べてみても、値段から制作方法までバラつきがあるのは当然のことです。 企画からスタートして、0から制作するもの 既に用意しているテンプレートで構築するもの JimdoやTumblrなど、サービスを使用するもの など切り口が複数かつ、各制作会社が設定している単価によって制作値段は変わってきます。極端な例ですが、同じサイト制作で
CSSの content プロパティーを使いこなそう！
2015年4月8日 CSS CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 ↑私が10年以上利用している会計ソフト！ content プロパティーって何？ content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。Webクリエイターボックスでも、過去記事「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」や「経歴や会社の沿革ページに！簡単なCSSで実装す
Dropbox使うと無料でGitのプライベートリポジトリ作れるじゃないですか！ - エンジニア3年生のお勉強ノート
GitHubというものがある Git使ってる人なら知ってるだろうけど、GitHubというサービスがある。これはWikipediaによると GitHub（ギットハブ）はソフトウェア開発プロジェクトのための共有ウェブサービスであり、Gitバージョン管理システムを使用する。 Ruby on RailsおよびErlangで記述されており、GitHub社によって保守されている。 主な開発者はChris Wanstrath、PJ Hyett、Tom Preston-Wernerである。 GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供している。 2009年のユーザー調査によると、GitHubは最もポピュラーなGitホスティングサイトとなった[3]。 というサービス。まぁいわば無料でリポジトリを作れるサービスですね。 無料なんですが、無料で利用する分にはリポジトリがすべて
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
クライアントに「とりあえず作ってみて。みてみないとわからないから」と言われた時のディレクターの返し方
先日、「とりあえず作ってみて。みてみないとわからないから」というつぶやきがTwitter上で話題になり、その一連の流れをまとめたtogetter上の記事が物議を醸した。 という事がありました。 「とりあえず作ってみて。みてみないとわからないから」つぶやきまとめ」 んで、この記事に対して僕がディレクターとして思ったことがあったり無かったりしましたので、ちょいと書いてみようかと思います。 ナカムラが思ったこと。 これってディレクターが前段階でもの申してやればなんとでもなることじゃね？ まず、クライアントの意見は全部入れるとだいたい見当違いのものができあがることが多いです。もうね、これは仕方ないと思う。だって企業の担当者はWEBの専門家では無い場合がほとんどなんだもの。 だから、どんなものができるのかイメージできない。 結果として「とりあえず作って見せてよ。お金出してるでしょ？」というスタンスに
提案資料とデザインの切っても切れない関係について
自分の経験上、提案資料は格好いいほうが通る確率高いです。もう、間違いなく。 ですので、できればすべてのWEBディレクターの持つ提案資料は、テンプレートを自社のデザイナーに書いてもらうべきだとすら考えています。それくらい重要です。 考えて見れは当たり前の話なんですが、 企業にとってWEBでなんかやるってことは、特殊な一部のケースを除き「WEBに支店を出す」のとほぼ同義。 目的はさまざまだと思いますが、そこには必ずデザインが要求されるはずです。 で、その「デザインを期待している担当者」のところに「ディレクターなんでデザインわかんないんです」みたいなアホがだっさい提案資料ひっさげて行ったらどうなるでしょう？ まあ、痛い目みると思います。 まだ痛い目にあっていない方も、たぶん相見積とられたら負けちゃうでしょう。 もうすでにかなりの制作会社で当たり前のように取り入れられていることだと思いますが、「提
構築のスピードとクオリティをあげる、本気のワイヤーフレームの書き方
要素を洗い出して、書き出す。 まずは、サイトの特長や企画特性に合わせて、各サイトの要素を洗い出します。コンテンツマップとは別に考える、いわゆる「パーツ」の部分も含まれるので、かなり量は膨大になりますが、しっかりやります。 んで、かならず「誰が読んでも何の事を言っているのかわかる一般用語で名称をつけます。」 例1：ECサイトの場合 ・ロゴ ・電話番号 ・SSLについての注釈 ・利用ガイド ・検索窓 ・買い物かご ・サジェストエリア ・商品画像 ・カテゴリーリスト ・TOPイメージ etc・・・ 上記の要素リストとは別に、コンテンツマップも作成したほうがいいです。 要素リストとは異なり、おおざっぱに言うとサイトの中にページとして存在させたい内容を洗い出します。 洗い出し終わったら、その内容を優先順位順に並び替え、一緒にできそうなところは一緒にして、分けた方がよさそうなところは分けて・・・とい
“Web業界の営業職”に必要な3つの能力と、おすすめサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして、メディアディレクターのもえこと申します。 最近LIGへ仲間入りした私ですが、以前はWeb制作会社で営業職をしていました。 現在はメディアディレクターとしてディレクションを中心とした業務を担当していますが、営業職の頃に培った知識や経験が糧になっているなぁ、と日々感じています。 そこで今回は、Web業界では少数派の「営業職」として活躍するために、私が必要だと考える3つの能力と、それを培うためにおすすめしたい“営業初心者向け”サイトを紹介していきます。 1. ヒアリング能力 クライアントとの商談で大切になるのが「ヒアリング能力」です。 受注の成否自体が左右されるのはもちろん、社内のクリエイティブチーム（Web制作においては、ディレクターやデザイナーなど）に対しての引き継ぎや指示出しなど、制作段階でのスピード感や関係各所との連携に対して大きな影響を及ぼします。 当然ながら会話力やコミ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adobe XDがかなり便利になってる！スマホやWebサイトの制作に使える、UIやワイヤーフレームの無料素材のまとめ
花、植物イラスト Flode illustration （フロデイラスト）
Kamiya Consulting, Inc.