Web制作者が捗る！知識が増える2014年トレンドまとめ
作成：2014/06/9 Web制作 > トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビューで使いたいエフェクト １．ロングシャドウ ２．ポリゴン ３．ラージフォトスタイル ４．ブラーエフェクト ５．フルスクリーン動画 ６．画像シーケンス 脱ビットマップ画像 ７．SVG ８．Webフォントを円で囲む 配色・フォント ９．配色(フラットデザイン) １０．タイポグラフィ(フラットデザイン) １１．フォント(フラットデザイン) 効果 １２．Infinite Scroll(無限スク
成果が出るサイトにするために改善すべき10のポイントを紹介 | LISKUL
「サイトを作成したが、思っていたよりも成果が出ていない」「どこからサイトを改善すればいいかわからない」とお悩みの担当者の方が多いのではないしょうか。 成果の出るサイトにしたい場合、まずは段階を踏んで改善をしていく必要があります。 今回はサイト改善で成果を出すためのポイント10選と、活用するべきツールを紹介します。 サイトを改善するためのポイント10選今回は貴社のサイトの成果を改善するためのポイントとして、視覚的なポイントと思考的なポイントに分けて、10のチェックポイントをご共有します。 以下の資料では、2万件以上のデータベースから最短30秒でサイト改善案を手に入れられるツールについてまとめています。無料ですので、ぜひダウンロードしてご覧ください。 サイトのコンバージョン率を改善するためのノウハウを、自動提案してくれるツール「dejam」 1. Webサイトの構成は、一般的なパターンか結論か
これ結構使えた！サービスサイトやWordPressテーマで使われている小技まとめ
作成：2014/05/19 更新：2014/11/01 WordPress > ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイト読み込み時 １．画像読み込み時、ローディング画像を表示／jQuery ２．読み込み時に文字を動かす／jQuery ヘッダー ３．文字の拡大・縮小／jQuery ４．入力補助／jQuery ５．伸縮するサーチボックス／jQuery コンテンツ ６．中心に水平線を入れる／CSS ７．均等に並べる／段組み／CSS ８．コンテンツが現れた時にアニメーションさせる／jQuery ９．マウスホバーで画像を拡大しキャプションを出す／jQuery １０．マ
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
WebデザイナーのためのPhotoshop関連記事まとめ
「2014年4月の、これだけは押さえておきたいWeb関連の動き」という記事を書いていたところ、あまりにもWebデザイナーのためのPhotoshop関連記事が多かったため別の記事としてまとめました。 Fireworks からの乗り換えの方向けの記事からより速く制作するためのテクニック、Adobe が開発中の CSS をコピーしたり画像アセットをダウンロードするためのWebアプリなど。 基礎〜現役Webデザイナー向けの制作テクニック FireworksユーザーがPhotoshopでwebデザインカンプを作る時、注意が必要なポイントとその解決策 | tipsBear シェイプやスマートオブジェクトを別の PSD に複製する方法 テキストボックスのサイズを変える方法 シェイプなどのサイズを取得する方法 など、普段 Fireworks をお使いの方が Photoshop でWebデザインしようとした
Web制作に必ず役立つIllustratorのチュートリアルやスライドのまとめ
ひと昔前までは「IllustratorはDTP」といった感じでしたが、Illustratorのバージョンアップによる機能強化に伴い、徐々にイラレでWeb制作をおこなう人が増えてきました。 ベクターっぽいスタイルのフラット、ベクターデータのSVGなどの影響もあるかもしれません。 Illustratorを使って、Web制作をする時に役立つ環境などの設定方法や注意点をはじめ、レイアウトやエレメントの作り方、スライスの便利技、時短テクニックなどのチュートリアルやスライドを紹介します。Illustratorで一番ネックとなる「にじみ」の理由とその解決方法も勉強になります。 Speed Design with Illustrator 翻訳版：Illustratorでインターフェイスをデザインする時に役立つ時短テクニックのまとめ ウェブやアプリなどのインターフェイスをデザインする時に役立つ14の時短テク
自分のwebサイト作る工程 - MEMOGRAPHIX
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
[JS]アイデアが素晴らしい！ページにちょっとしたアクセントを加えるスクリプトのまとめ
そのまま使ってもよし、アイデアに刺激されインスパイアされてもよし、の工夫をこらした素晴らしいアイデアのスクリプトを紹介します。
【保存版】Illustratorでインターフェイスをデザインする時に役立つ時短テクニックのまとめ
Illustratorでウェブやアプリなどのインターフェイスをデザインする時に役立つ14の時短テクニックを紹介します。 Speed Design with Illustrator Illustratorの時短チップスを書いたのはVincent Le Moign氏で、彼の別サイト「WEBALYS」ではたくさんのフリー素材を配布しているので覗いてみてください。 WEBALYS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。無断翻訳・まとめ記事の転載をしているあのブログの注意喚起を海外のブロガーから聞くのでご注意ください。 時短でボタンをつくる 1クリックでテキストをデザイン カラー変更の強い味方「グローバルカラー」 モジュール式のデザイン アイコンフォントを簡単に扱う方法 グリッドの設計 グリッドにスナップさせる アートボードの活用 サイ
ブックマークレット10選
こんにちは、デザイナーのサリーです。セブ島のお土産に名物のシニガンスープの素をたくさん貰いました。 シニガン？な私は裏面（おそらくフィリピン語）を見てもさっぱり作り方がわかりません、クノールなのに… パッケージイラストとクックパッドを頼りにどうにかこうにか料理してみようと思います。 今日はデザインやコードをチェックするのに便利なブックマークレット10個を紹介します。 デベロッパーツールやブラウザの拡張機能を使った方が良さそうだと思ったもの、個人的に使いづらかったものは除外して、実用性のあるブックマークレットを選んでみました。 「ブックマークレットってなんだろう？」な方に説明をしておくと、 ブックマークレット 通常ウェブブラウザでブックマーク（お気に入り）を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選ん
2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ
数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ（特に画像）、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大きく変化するウェブデザインの7つの傾向 2014年、注目度の高いIT系の職種・役割 2014年、ウェブ制作業界全体の流れ まずは、2012, 2013年と的確な予測をだしてきたsitepointの2014年のウェブ制作業界の全体の流れから。 10 Web Predictions for 2014 スマートフォン中心の年 最終的にはデスクトップからのアクセスをスマフォが超える HTML5のウェブアプリ
Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人
今からでも間に合う！レスポンシブWebデザイン作り方のまとめ
photo by Scolirk 地方でもマルチデバイス対応を求められることが多くなってきました。 徐々に対応しているところが増えてきたためだと思います。 私も昨年からレスポンシブWEBデザインについて、 対応する必要がありましたので、調べたものをまとめてみました。 もくじ レスポンシブWebデザインとは？ ギャラリーサイト レスポンシブWebデザインの作り方 画像の切り替え・最適化 レスポンシブ対応のフレームワーク レスポンシブ対応のライブラリ サイトの高速化 レスポンシブWebデザインとは？ 2年程前から流行し始めたレスポンシブWebデザイン。 基本的な考え方、メリット・デメリットを理解しておかないとトラブルの元になります。 レスポンシブWebデザインの基本 レスポンシブWebデザインの基礎 必読！5分でわかる流行のレスポンシブWebデザインまとめ | 株式会社LIG 5分で分かるレス
Web制作の見積もりの難しさとか相場とか｜withComputer
つらつらと考えてしまった記事があったので、長くなるけど書く。 WordPressサイトを構築するといくらかかる？ 見積り勉強会で価格を出してみた | WordBench WordPressの見積り勉強会を終えて、運営の一人として思うこと うえむ日記 - トヤヲ.ネット この手の試みは勉強会としては珍しいのかもしれないけど、Web制作者向けの専門誌「Web Designing」では、架空案件の見積もりをしてもらうアンケートが毎年行われている（Webデザイナー白書という企画の一環）。この手の話が気になる人は、ぜひバックナンバーを取り寄せて読んでみて。 見積額については、上の記事でも「大きな開きがでました」と述べられているけど、Webデザイナー白書の方はもっと極端で、下は6万円、上は1,000万円という結果。発注側（クライアント側）からすれば「ありえねーだろ」という感じかと思うが、これにはいくつ
Web開発者に革命をもたらす！「Web Components」超入門 | 株式会社LIG
こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSS、HTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一
保存版！Web制作の見積もりで忘れず検討したい22項目 | 請求書作成サービス「Misoca(ミソカ)」
こんにちは、トヨシです。Webサイトの納品後に 「それ見積もりに入れるの忘れてたー！」 というのはだれもが一度は経験したことがあるんじゃないでしょうか。以前は私もWeb制作に関わっており何度も経験が有ります。今回はそんな悲劇が二度と起きないようWeb制作（ホームページ制作）の見積もり時に忘れやすいけど忘れずに検討したい項目についてまとめました。 全体をホームページ制作前、制作中、制作後、その他の4つに分けて紹介します。 とその前に、 見積書の作成にお困りの方は、ミスなくカンタンに見積書や請求書が作れる「Misoca」がおすすめです！レイアウト崩れや記入漏れの心配無用です！ 制作開始前に必要な見積もり項目 企画・ディレクション費用 打ち合わせ、提案書の作成、アイデア、ノウハウ代など見積もりに含めることは多いです。 旧サーバからのデータ移管費用 サーバの変更がある場合はデータやシステムの移管を
ランディングページで平均4.2%の成約率を出すために行っている27の手順
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. おそらく、大半の企業はランディングページで望むだけの売上を得ることが出来ていないのではないだろうか。 もし望むだけの数字を達成できているなら素晴らしいことだ。しかし、大半の方は、どの会社に頼んでも数字は変わらないので、ほとんど諦めかけているかもしれない。 一方、弊社のランディングページは平均で４.２％のコンバージョン率が出すことができている。 また業界別では、賃貸業で１８.２７％、美容で１５.７２％、健康食品で１４.２１％、建築業で１３.６４％、整骨院で７.１３％など、業界平均を大きく上回る数字だ。 そこで本日は、バズ部がランディングページを制作する上で実際に行っている全ての手順をご紹介する。 これを読めば、高いコンバージョン率を記録して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
店舗サイトをWordpressで制作するときに役立つプラグイン５選 | Wordpress boy（ワードプレスボーイ）
株式会社ガイアックスの公式サイト › ガイアックスオフィシャルサイト
