カードデザインのポイントと実装方法
2018年5月18日 CSS, Webデザイン Pinterestがカードスタイルのデザインを取り入れてから、TwitterやFacebookをはじめ、多くのWebサイトで採用されているカードスタイルのデザイン。今回はそんなカードデザインの特徴やデザインのポイント、実装方法などをまとめてみます！ ↑私が10年以上利用している会計ソフト！ カードデザインとは 名前のとおり、カードのような四角形を並べたスタイルのデザインです。多くの場合、ひとつの項目に対して画像やテキスト、ボタン等、様々な要素が含まれています。ECサイトやコンテンツの多いWebサイトでよく見かけるスタイルですね。 Etsyは手作りの商品を販売できるECサイト。商品の画像を大きく打ち出し、その商品に関する情報が掲載されています。ログインしていれば、詳細サイトにいかなくてもお気に入り登録などが可能。ページ移動をしなくてもなにかしら
これからのWebデザインは、コンポーネント化を意識しよう
2016年6月14日 Webサイト制作, Webデザイン Webデザインのプロセスが変化しています。以前「実践で学ぶWebサイト制作ガイド まとめ」という記事でWebサイトの制作手順を紹介しましたが、この方法はまだ使えるものの、徐々に廃れていくでしょう。最近ではこの記事で書かれているように、画面にあるパーツ（部品）のみを用いてデザイン・コーディングするのではなく、あらかじめ様々なパーツを作っておいて、それを組み合わせて画面を構成していく方法に移りつつあります。今回はそんなパーツをまとめた「コンポーネント」について考えてみましょう。 ↑私が10年以上利用している会計ソフト！ コンポーネントとは？ Webデザインにおいて、コンポーネントとは機能を持つ各パーツ（部品）の集合体です。例えば料金表ひとつとっても、テキストや線、ボタン、色など、様々な情報を組み合わせて作られていることがわかります。それ
Webサイトのプロトタイプ制作に使える無料オンラインツール
2016年3月19日 Webサイト制作, 便利ツール Webサイトを制作する際に大切なものの多くは、制作開始する前の段階にあります。サイトの設計・計画がうまくいっていないサイトは、制作開始後、様々なトラブルに見舞われることでしょう…。ということで今回はモックアップ・プロトタイプと呼ばれる設計画面を作成できるオンラインツールをいくつか紹介します。サイトの大まかな動きをチーム内でシェアしたり、フィードバックしあったりと、便利に使えるものばかりです！ ↑私が10年以上利用している会計ソフト！ 2016年3月16日 追記：Adobeがリリースしたプロトタイピングツールも試してみました！→ Adobe Experience Design（XD）を使ってアプリのプロトタイプを作ってみた ViewFlux ViewFluxはデザイン画像のシェアやフィードバックが簡単に行えるツール。必要なページのデザイン
WordPressプラグイン「WPML」でブログを多言語化する
2014年9月1日 Wordpress 「自分のブログをもっと世界に広めたい！」そんな人におすすめのWordPressプラグイン「WPML Multilingual CMS」を紹介します。このプラグインを使えば簡単にサイトを多言語化することができます。言語スイッチャーも自動で作成してくれるので便利！日本語のみならず他の言語でブログやWebサイトを運営してみませんか？ ↑私が10年以上利用している会計ソフト！ ※WPMLは2011年2月に有料化されました。 一応、サンプルとして私のポートフォリオサイトを紹介します。WPML Multilingual CMSを使って日本語・英語を表示しています。デフォルトは英語で、右上の言語スイッチャーから日本語に切り替えられます。 » WebクリエイターMana オンラインポートフォリオ WPMLをインストールする まずはWPMLをインストールします。自動イ
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス
2017年7月14日 便利ツール 久しぶりに自分がブックマークしているサイトを整理してみました。昔から変わらず愛し続けているWebサービスやチュートリアルサイトなど多数あったので一挙にご紹介します！有名どころからあまり知られていないけど便利なサイトまで、多数あるので時間のある時にじっくり見てみてください！ ↑私が10年以上利用している会計ソフト！ ブックマークしているサイト 目次 Webサービス デザイン関連 画像関連 CSS jQuery WordPress フォント スマートフォン 配色関連 HTML5 メルマガ Webサービス 1. Sendoid Sendoidは会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生成されます。パスワード設定可。 2. HTMLエンコードフォーム HTMLエンコードフォームは特殊記号などをエンコード・デコードしてくれるWebサービ
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
配色パターンからWebデザインを考える
2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト！ まずは色彩の三属性について 色は彩度・明度・色相の三属性（三要素とも呼ぶ）から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和食・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い＝明るい色はさわやかで爽
CSSスプライトで画像を円滑に表示させる
2014年8月13日 CSS, Webサイト制作 CSSスプライトとは、複数の画像をひとつにまとめて、CSSでポジションを指定することにより表示させるCSSの技のひとつです。画像の数を減らすことにより、サイトの表示を速めることができます。以前よりYoutubeなどに使用されているので、その名前を一度は聞いたことがあるかもしれません。ここではCSSスプライトを使用したメニュー画像の作り方を紹介します。 ↑私が10年以上利用している会計ソフト！ CSSスプライトを使うデメリット メリットは上記にあるとおり、サイトの高速化が期待できます。ではデメリットとは？ alt属性が使えない 背景画像のリピート表示ができない 更新する時に手間がかかる（サイズを変えるとCSSも変えなければいけないため） 以上をふまえて、私はいつもメニューの背景やボタンなど、マウスオーバー時に変化する画像のみCSSスプライトを
【一部閲覧注意】いろんな意味でインパクトありすぎるWebサイト10 | Webクリエイターボックス
2021年12月27日 Webデザイン 衝撃的な配色、心踊りだすgifアニメーション、斬新な背景画像…そんな一度見たら忘れられないくらいインパクトのあるWebサイトをいくつか紹介しようと思います！また、あなたのWebサイトを素敵に変身させてくれるWebサービスも一緒にご紹介します！ ※一部閲覧注意のWebサイトもあるのでお気をつけください。 ↑私が10年以上利用している会計ソフト！ どこか懐かしさも感じるWebサイト 1.【閲覧注意】激安 格安 爆安ホームページ制作屋 WebクリエイターボックスのTwitter 人気のつぶやき 2010年 トップ30で見事3位に輝いたWeb屋さんのサイト。離れて見ても体に悪影響を及ぼしかねません。 » 激安 格安 爆安ホームページ制作屋 2.【閲覧注意】ACCEPT JESUS, FOREVER FORGIVEN! レインボーの背景が横に高速で流れていきま
カテゴリー別配色アイデア100
2017年6月30日 色彩 配色によってそのデザインの印象は大きく変わると思います。色は大切な要素のひとつですね！ということで、色の持つ印象別に配色アイデアをずらりと並べてみます。配色はおなじみ（？）のCOLOURloversから、「これは！」と思うものを選ばせて頂きました。素敵な配色がいっぱいのこのサイト、ぜひ覗いてみてください！また、今回紹介するのはあくまで一例ですので、自分なりにアレンジしてみるのも楽しいと思います。サイトの雰囲気にあう配色を探してみてください。 ↑私が10年以上利用している会計ソフト！ 配色に関するおすすめサイト COLOURlovers 色をテーマにしたコミュニティサイト、COLOURlovers。自分の考えた配色を登録したり、お気に入りの配色を保存しておくことができます。今回はこちらから配色アイデアを選びました。iPhoneアプリは「ColorSchemer」と
CSSハック一覧
2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！ ↑私が10年以上利用している会計ソフト！ Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h
デザインの要素と原則
2017年6月29日 Webデザイン 今回はデザインの基礎をお勉強しましょう！デザインは複数の要素（エレメント）と原則（プリンシプル）から成り立っています。それらを簡単に説明するとともに、要素と原則を生かしたWebサイトを一諸に紹介します。私は「デザインセンスは才能」とは考えていません。デザインセンスはそれらの要素をどう組み合わせるか、という閃きとその引き出しの多さによるものだと思います。ぜひ参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ デザインの要素（エレメント）と原則（プリンシプル）は全てのビジュアルデザインの基礎と言われています。要素はデザインの「表現手段」を形成し、原則は「構造的特徴」を構成します。デザインにおける要素と原則の認識は、視覚構成をすることにおいての最初のステップ。Webデザイン、グラフィックデザイン、プロダクトデザインなど、すべてのビジュアルデザ
ECサイトをデザインする時の8つのポイント
2017年6月29日 Webサイト制作, Webデザイン プログラミングに詳しくなくてもECサイトを設置できちゃうCMSがたくさんあります。そんなCMSを紹介…しようと思ったのですが、かちびと.netにまとめ記事があったので、そのへんはシロ氏にお任せして、今回はECサイトのデザイン部分に焦点をあててみたいと思います。ECサイトではその商品やマーケティングが重要になってきますが、サイト全体のデザインを工夫してユーザーの購買意欲をより刺激しましょう！ ↑私が10年以上利用している会計ソフト！ 1. 商品のデザインと合わせる ECサイトのデザインは、その商品を知ることから始まります。例えば商品が服ならそのブランドのデザインコンセプトはもちろん、どんな人が、どんな場所で着るのか、素材やよく使われている色合いなどを研究してみてください。 Apple http://www.apple.com/jp/
クリエイティブな20のECサイトデザイン
2017年6月29日 Webデザイン, インスピレーション ECサイトを作る際は、使いやすさだけでなく、デザインももっとクリエイティブに！商品を理解し、それにあったデザインをすることでより効果的にユーザーにアピールすることができます。ここではサイトを開いた瞬間に「おっ！」と思うようなECサイトを紹介します！ ↑私が10年以上利用している会計ソフト！ 商品をより引き立たせるWebデザイン集 free people http://www.freepeople.com/ ノートに落書きをしたような手描き風のデザインや、ほどよくレトロ感のある写真加工に思わず釘付け。 DUCHY of CORNWALL NURSERY http://www.duchyofcornwallnursery.co.uk/ 落ち着いた色合い、ほどよいグランジ感、バナー写真の切り抜きなど商品であるお花を引き立てています。 k
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
