お知らせ 2024/12/13Template WEB制作・システム開発サイト向け（ランディングページタイプ） 無料ホームページテンプレート tp_biz63公開。 2024/11/22Template モバイルファースト(スマホ幅)のLP向け 無料ホームページテンプレート tp_sh1公開。カフェ・居酒屋・レストラン・ピザ専門店・クラフトビール専門店・ケーキ屋さん・コーヒー専門店・ハンバーガーショップ・マカロン専門店・ベーカリーショップを想定しましたが他のサイトにも転用できます。 2024/11/15不具合 Firefoxでハンバーガーアイコンをクリックしてもメニューが開かない不具合。 2024/11/14お知らせ slickを使ったスライドショーがチラつく件の対応版を公開　※slick未使用。 （上記ページ内の「slide4-parts」と「slide5-parts」が該当。） 202

こんな風に思っていませんか？ 馴染みのないデザインツールですが、コーディングに必要な知識は少しだけで大丈夫。 この記事では、制作会社でコーダーをしている私が、実務でのコーディング方法を初学者でも分かるようにまとめました！ この記事を読むことで、Photoshopからのコーディングも怖くなくなりますよ！ Photoshopからもコーディングできたほうがいい?Webデザインは、最近ではfigmaやAdobe XDが台頭しつつありますが、Photoshopで作っている制作会社もまだまだ多い状況です。 実際にわたしが実務でコーディングするデザインカンプは、PhotoshopとIllustratorが9割ほどを占めています。 コーディングで仕事をしたいならPhotoshopでのコーディングの知識は必須と思っておいていいでしょう。 PhotoshopをインストールPhotoshopをまだ使ったことがな

JavaScript はクライアント側で実行されるオブジェクト指向型のスクリプト言語です。 JavaScript を用いることで、動的にWebページの内容を書き換えたりフォームに入力された内容をクライアント側でチェックしたりできます。ここでは JavaScript の使い方として JavaScript のプログラミングの方法をサンプルを用いて解説していきます。

Download Color Schemes Discover thousands of beautiful color schemes made by professional artists, graphic designers and web creators. Popular Trending

JUSO Coworkingで10/4に行われた「ウェブ時代のデザイナーのための文字組入門 」に参加してきました。講師はなんでやねんDTPで有名な大石さん。最近パンフレットなど印刷物をご依頼いただく機会も増え、本を買って読むもののなかなか疑問を解消できないわたしにはぴったりの勉強会でした。今回の記事はIllustratorで印刷物のデータを作る、という前提です。 そもそも文字組・文字詰めは何のため webデザインでは、デバイステキストを自由に詰めたり組んだりすることがむつかしいため、文字組・文字詰めと聞くと「なんか難しそう」と構えてしまいがちです。 私たちがよく使うフォントというのは、四角い箱の中でデザインされています。しかし日本語のように「ひらがな」「カタカナ」「漢字」と様々な文字の形があると、当然小さい形、大きい形が出てきます。また、約物と言われる「」や（）や・などは、隣り合うと何だか

レスポンシブWebデザインのサイトは国内でも増えてきましたが、制作するとなるとかなり手間がかかります。 そんなとき役に立つのがレスポンシブWebデザイン対応のフレームワーク。中でも「Bootstrap」は、多彩な機能を備え、その使いやすさから広く知られています。 そこで今回は、国内の秀逸なレスポンシブWebデザインを集めた「Responsive Web Design JP」から、Bootstrapを使って作られたサイトをご紹介したいと思います。 whiteSTOUT フォトクリエイティブを中心としたマネージメントオフィスのサイトです。トップに大きな画像を使い、洗練されたイメージとなっています。 AGATHA E-SHOP アクセサリーブランド「AGATHA」のECサイトです。有名ブランドの、しかもECサイトにもBootstrapが使われています。 ACTUS online こちらは有名イン

「レスポンシブからアダプティブへ – 必要な情報を、必要なときに、必要としている人へ」という記事を読んでいてレスポンシブ・デザインやアダプティブ・デザインの言葉の定義を一度整理しておいたほうが良さそうだと感じたので、遅ればせながら自分なりにまとめてみました。 レスポンシブ・デザインやアダプティブ・デザインについて話をする際に、そもそもの定義がずれていると話が噛み合わず、無駄な討論をしかねません。さんざん討論したあげく「ところで、アダプティブ・デザインってどんな意味で使ってる？」と問いなおしたら、お互いに勘違いしてたとか、結構ありそうな話です。 どれが正しいとか正しくないとかではなくて、僕が知る範囲で一般的に使われている定義をまとめてみました。いくつかの意味で使われていることを知っておけば、ミス・コミュニケーションも未然に防げる可能性が高くなるのではないでしょうか？ ※ここで紹介する定義を「

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr：http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので、 その中で重要なものだけ教えてほしかったので、 自分で作っちゃえ！って思って作りました。 そのときに使った便利ツールたちをまとめておいたら便利そうだったので、 今回

この記事で紹介する「面白い広告」とは、ネット上で成果が出ていそうな奇抜な広告です。 面白い広告は、ただ「面白い」わけではなく、成果を出すためのテクニックが凝縮された結果、面白くなっているものもあります。 そんなテクニックが凝縮された面白い広告を、ウェブマーケ担当者の知見を活かして紹介いたします。 主役になることがなかったヤツを、 メインに添えることで目立っている 出典：肝臓の解毒力を高める機能性野菜ブロッコリースプラウトの健康成分 KAGOMEのバナーデザイン｜retrobanner 出典：ぼく、天下取る。Greenのバナーデザイン｜retrobanner ・ブロッコリーや猿など、普通に考えると広告の主役にはなり得ないものをメインとして デザインすることで、ものすごい違和感を醸し出している ・「まずは綺麗な商品写真」「まずはターゲットの写真」という固定観念にとらわれていない ・目立って、見

マーケティングでは、顧客心理を読み解くことが戦略策定のもっとも大切なポイントの一つです。 その顧客心理を読み解く一つの方法として「心理学」が応用され、人間の「性質」や「本質」をもとにしたマーケティング戦略が考えられてきました。 ただ、この心理学がWEBマーケティングにおいて活用されることはまれでした。 そこで、今回はWEBマーケティングに役立つ行動心理学の手法を8つに厳選してピックアップ。 それらが実際に活用されている企業サイトを集めて重要エッセンスを抽出しました。 そしてさらに勉強したい方に向けて、もう20個の行動心理学の効果と実用方法をまとめました。 ウェブサイト上で行動心理学がどのように使われているのか、実例を参考にしながら、ぜひ自社サイトやブログにも導入してみて「ついクリックしてしまう」サイトを目指していきましょう！ Webサイトの改善策を”自動”で提案！売上向上に繋げるサービス『

効果が出るバナーのレイアウトには一定のパターンがあります。 今回は成果を出せるバナーのテンプレートを20種、広告代理店でバナーを作成している私が作ってみました。 バナーのレイアウトでお悩みの方も、そうでない方も、イメージを膨らませたり、いざという時のためにストックしたり、自由に活用して頂ければと思います。 【eBook】コンバージョンする効果の高いバナーの作成方法 悩んだらまずは最強のベーシック型コピー・訴求文・写真などをバランス良く盛り込み、情報量が多いレイアウト。バナーの時点で多くの情報を伝えられるため、飛び先との整合性が高いことが特徴です。しかし珍しさやインパクトにかけるので、似たようなバナーにまぎれると埋もれてしまう恐れがあります。 ベーシック型バナーレイアウトベーシック型バナーサンプル ベーシックに負けない３つの王道レイアウト同じバナーを出し続けているとユーザはマンネリを感じてし

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

Elements of Design is a collection of UI components that highlight best practices for particular design patterns from leading websites around the world. Browse the archives and use it as a source of inspiration for your next web design project. The average shopping cart abandonment rate is slightly under 70%, which translates to billions of dollars in lost sales per year. As a result, an effective

【img via tabletop assistant by MattHurst】 優れたユーザーインタフェースとは何か。どのようなデザインを「優れたユーザーインタフェース」と呼ぶのに相応しいのだろうか。 GoodUIというサイトに優れたユーザーインタフェースを実現するために確認しておきたい36項目をイラスト付きで解説していた。とても分かりやすく納得できる内容が多かったので、紹介しておく！ 1.マルチカラムではなく、シングルカラム 複数カラムだとユーザーの目線が左右に逸れてしまう可能性があるため。 2.まずはギフトを渡してみる 最初から買うことを促すよりもまずはこちらから何かを与えることによってユーザーに喜ばれる。 3.似た機能や項目は1つにまとめて表示する 似た機能を分散させる必要はない。 4.ユーザーからの反応を載せる 実際に使っている「ユーザーの声」を参考に買い物をする人は少なくない

縦列に対してスタイルを適用するための方法や、行や列のハイライト表示、データセルのソートなど、jQueryを使ったデザインサンプルを紹介します。 対象読者 （X）HTMLとCSSの基本を理解している方。 デザインのコツを学びたい方。 必要な環境 本連載で動作確認を行ったブラウザは次のとおりです。 Windows 7 Internet Explorer 11 Windows 7 Firefox 26 Windows 7 Chrome 32 テーブルの縦列をスタイリングする HTML上では、セル（th/td）は列ではなく、横行（tr）の子孫要素になっています。そのため、スタイリングの対象として横列を操作するのは比較的簡単ですが、縦列を操作する場合には、ちょっとした知識が必要になります。 テーブルの縦列をマークアップする テーブルの縦列を構造的な意味でグループ化したい場合には、colgroup要素