静的サイトジェネレータ「Phest」導入のメリット5
静的サイトジェネレータがブームだとか聞きます。 私の場合は、大変な要件が来た時になにかいい方法はないものか・・・と辿り着いたのが 静的サイトジェネレータでした。 初期に集中して構築した結果、その後の修正や運用でとてつもない工数の削減ができたので、 導入は大成功となりました。 静的サイトジェネレータですが、初期コーディングの時点でも威力を発揮しました。 ここでは初期コーディングにおいての静的サイトジェネレータのメリットを5つまとめました。 もくじ そもそも静的サイトジェネレータとは？ 選ばれたのはPhestでした メリット1:同じことを複数記述しなくていい メリット2:ルールを把握しやすい メリット3:パスの設定方法が豊富 メリット4:テスト用、本番用ファイルの生成が楽 メリット5:パターンのテストが簡単にできる 最後に そもそも静的サイトジェネレータとは？ 選ばれたのはPhestでした メ
デザイナーも静的サイトジェネレーターが使えた方がよいのではないか
静的サイトをどのように制作していますか? 静的サイトジェネレーターを使っていますか? Web デザイナーは Photoshop や Sketch でサイトデザインをして HTML / CSS / JavaScript でコーディングといった、静的サイトの制作を行う機会が多いかと思います。 私の場合も同様に、Wordpress や Web アプリケーションに組み込むための静的サイトを制作することが多く、これを効率的に行うべく LESS をやり始めたのですが、周りで使っている人がほぼ皆無。Sass / SCSS 割合の高さに焦り、慌てて切り替えました。 そして、さらなる効率性を求めて 1 年ほど前から静的サイトジェネレーターを取り入れました。 静的サイトジェネレーターとは？そもそも静的サイトジェネレータとは、静的サイトを効率的に制作するためのツールで、好みの言語で開発して納品用に HTML /
静的サイトジェネレータを比較してみた - Qiita
静的サイトジェネレータを使ってサイトを作ってみたかったけど、StaticGenを見ても違いがイマイチわからなかったので、自分の気になる点で比較してみました。 比較したプロダクト Middleman Hugo Metalsmith Pelican 上記の4プロダクトを比較しました。 StaticGenで人気がありそうなものを中心に選定しましたが、自分が作りたいサイトはブログではない普通のサイトなので、ブログ作成に特化1していると書いているものは外しました(Jeykll, Octopress, Hexo等)。 なお、比較はすべてドキュメントやサンプルプログラムから読み取れる内容で行ったので、実際の挙動が違っていたらごめんなさい。 基本項目 プロダクト名 開発言語 コンテンツ
レイアウトの基本的な型と、レイアウトからデザインまでの流れ
Webサイトにおいて、レイアウトの基本的な型と、レイアウトからデザインまでの流れを簡単にまとめてみました。 レイアウトからデザインまでの流れを把握しておくと、その間の思考が分断されずデザインがしやすくなると思います。 また、ユニークなレイアウトにするにしても、あらかじめ基本的な型を知っておくと逸脱がしやすくなりますね。 レイアウトに影響を与える要因 レイアウトにはいくつかの型がありますが、まずその型を決定する前に、レイアウトに影響を与える要因を知っておく必要があります。これらの要因によって、レイアウトの型があらかじめ決まったり、レイアウトが大きく変わるからです。 情報階層の深さ →1ページのサイトなのか、第二階層以降ありグローバルナビゲーションが必要になるのか、など サイトの目的・属性 →そのサイトでは何を伝えたいのか。企業・ブランドのメッセージや情報、ユーザーに役立つ知識（Wikiped
ディレクターなら知っておきたい「バナー広告制作の基礎知識」 : LINE Corporation ディレクターブログ
こんにちは、NHN Japanのマッチングサービス事業部でマーケティングを担当しているotakeです。 今回は担当サービスの運用業務と並行して出稿も担っている忙しいディレクターさんやこれから出稿業務に携わる方のために、チャッチャと読んで現場ですぐに使える実戦的なナレッジの一部を「バナー広告制作の基礎知識」として書かせていただきます。 当事者意識を持たせるAttentionを考える ユーザーの購買行動において、バナー広告が担うポジションはAttention（注意）喚起にあたりますが、一般的にバナー広告は誰に注意を促すものなのでしょうか。 検索から目的を持って能動的に何かを探しているわけではないが、潜在的な関係性を秘めているのがバナー広告の対象となる潜在層。ここに位置する対象には”この広告はあなたに関係あるものです”、”おそらくあなたの話です”といった潜在欲求に気づきを与える「当事者意識を高め
シニアを引きつける！購買意欲を高めるキャンペーンサイトの黄金パターン | マミオン有限会社-パソコン・数学研修、法人研修
シニア層、中高年に人気の健康食品、『セサミン』『皇潤』『グルコサミン』。 皆さん、ご購入されたことはありませんか？ 今回、社内でシニア向けのキャンペーンサイトを設計することになり、 この大人気商品のサイトをベンチマークしていました。 どれも縦に非常に長い、いわゆる「楽天メソッド」的なデザインですが、 よく見ると、コンテンツの構成に共通したあるパターンを見つけることができました。 ユーザーの購買意欲を高めるこの黄金パターン、 後述する標準的なコンテンツエリア比率と共に、 今後のキャンペーンサイトデザインの参考にしていただけたらと思います。 今回チェックしたサイト サントリー『セサミン』：ページ長さ4880px エバーライフ『皇潤』：ページ長さ9122px 大正製薬『グルコサミン』：ページ長さ11167px 不安をあおる⇒買うべき理由⇒商品特徴の紹介⇒ユーザの声結論から言うと、3つのサイトとも
プレゼンやブログが伝わる文章の基本。良書に学ぶ「書く技術」 | お土産屋さんブログ
皆さんはプレゼンしたことや、ブログを書いたことありますか？ わたしの初めてのプレゼンはとてもヒドい内容で、10人の参加者全員が「？」状態でした。 その後、上司にみっちり絞られたのを今でも覚えています。 叱られてもなお「何が分からないと言うんだ！」「何で理解できないんだ！」と、相手の理解力の無さを「伝わらない」原因にしていました。 しかし、名著「考える技術・書く技術」を読み、初めて自分の伝え方に問題があったんだと知りました。 今回は、わたしを変えてくれたバーバラ・ミント著「考える技術・書く技術」を紹介してみようと思います。 １．伝わる文章の大前提 ２．ピラミッドの「良いガイド」になろう ３．どうやって読み手と対話するのか？ ４．どうやって疑問を湧き起こさせるか？ ５．どうやって「答え」を出すのか？ 伝わる文章の大前提 バーバラさんは言います。 キミは自分の思いを他人に伝えたいと思ったことはあ
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ
コーポレートサイト構築/運営の注意点メモ | Maka-veli.com
一応これでもWebディレクターとしてやってきた経験があるので、メモしておきます。10個。 トラブルの元は最初からお客様と相談しておきましょう。 ※wp,jQuery,Flashを使ってこう作れ！とか、そういった物ではなく、 運営とかお客様とのやりとりとか、 なるべくディレクション寄りの10個にしてみました。 1 プログラムで動的に出す物は、 一応、先10年くらいは想定しておく。 特に年末年始にかかる物。例えば画像文字とか。 年末年始にトラブル程最悪な物は無いです。 意外に大手サイトでも10年とかリニューアルしないで ずっと同じシステム使う事だってあります。 というか大手になるほどシステムリニューアルしづらくなったり、 Webにあまり力を入れてない大手企業さんとかは本当に長年使ってくださるので、 絶対に用意しておいた方が良いです。 2 CMSはできるだけ有名な物を使う。
Ywcafe.net
Ywcafe.net This Page Is Under Construction - Coming Soon! Why am I seeing this 'Under Construction' page? Related Searches: Health Insurance Parental Control Healthy Weight Loss Cheap Air Tickets Online classifieds Trademark Free Notice Review our Privacy Policy Service Agreement Legal Notice Privacy Policy
ウェブ制作者のためのベストエントリ33【2010年7月版】
というわけで、しばらくまとめていなかったまとめ記事を再開し、私は元気ですとアピールしたい。 7月にあつめたブックマークのまとめです。 7月度必須ブクマベスト HTML5 Canvas Cheat Sheet 悩んだけど一応ベストへ。 HTML5 Canvas tagのチートシート。日常的に使うものでもないし、開発者向けになってしまうけど念のため。 OSを選ばないウェブデザイナーのための使えるウェブアプリ15*ホームページを作る人のネタ帳 7月に書いたけどついこの間のようだと思ったら、あんまり記事かいてないからそう思うんだきっと。 ついでにこちらも7月でした。 今日から現場で使えるjQueryのフォーム関連プラグイン15選 iPhone等のWebアプリをHTML5で構築する為のフレームワーク・Sencha Touchを触ってみた スマホアプリ開発者ならブクマしておきたい一品です。 Googl
写真を使用してデザインをするためのベストプラクティス
写真はウェブに限らず、デザインをする上で非常に重要な要素です。 ここではウェブデザインで使用する際の写真の入手から、カラースキーム、タイポグラフィとの組み合わせ方などシンプルで効果的な方法を紹介します。 Designing From a Photo: Quick Tips and Best Practices [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 写真の入手 Color Schemes Typography Bleed まとめ はじめに フォトグラフィはタイポグラフィ以来、デザインを成功させる最も素晴らしい手段です。クオリティが高い写真は程度の低いデザイナーでも素晴らしいデザイナーのように見せるでしょう。 素晴らしいフォトグラフィのデザインをするためにいくつかのテクニックとアイデアを紹介します。 写真の入手 まず第一に、デザイナーとしてあなたができる最も良い方
カラーだけではない、ウェブデザインにおける4つのコントラストの使い方
コントラストはカラーだけではありません。 ユーザーに伝えたい重要なエレメントを適切に目立たせる4つのコントラストを紹介します。 Fully Understanding Contrast in Design [ad#ad-2] 下記は各ポイントを意訳したものです。 コントラストとは 1. カラーのコントラスト 2. サイズのコントラスト 3. シェイプのコントラスト 4. ポジションのコントラスト おわりに 通常、コントラストがテーマに扱われる時は初心者向けのものが多いでしょう。例えば書籍では、『ブラックとホワイトがコントラストをもっており、レッドとオレンジはそうではありません』と書いてあります。初心者向けの本では、コントラストはカラーのことだけが触れられており、サイズやシェイプについては触れられていないでしょう。 アマチュアのデザイナーとプロのデザイナーを区別する最も容易な方法は、コントラ
ホワイトスペース -十分に利用されていないデザインエレメント
Whitespace: The Underutilized Design Element [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ホワイトスペースとは 優雅さと洗練さ レジビリティとユーザビリティ ホワイトスペースに注目する はじめに 素晴らしいウェブデザインをつくりだす多くのエレメントがあります、その中でも十分に利用されていないものの一つがホワイトスペースです。すべてのデザインがホワイトスペースを持っていますが、問題はすべてのデザインが十分持っているわけではないということです。 これは経験不足のデザイナーと彼らのクライアントがホワイトスペースを単にスクリーンの領域の浪費として見るという事実があります。 しかし、真実は違います。ホワイトスペースはあなたのデザインの最も貴重なエレメントです。 ホワイトスペースとは その名前が暗示する白いスペースである必要はありませ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hatena ID
Not Found : Watanabe-Denki Inc.
Loading...
まいあめでマークのまいあめ制作例｜まいあめギャラリー｜オリジナルキャンディー制作・組み飴製造のまいあめ工房
面白いUIを備えた、HTMLのダミー要素を生成するオンラインサービス -Fillerati
ウェブ制作関連のチートシートをまとめたポータルサイト -Quickly Code