カードデザインのポイントと実装方法
2018年5月18日 CSS, Webデザイン Pinterestがカードスタイルのデザインを取り入れてから、TwitterやFacebookをはじめ、多くのWebサイトで採用されているカードスタイルのデザイン。今回はそんなカードデザインの特徴やデザインのポイント、実装方法などをまとめてみます！ ↑私が10年以上利用している会計ソフト！ カードデザインとは 名前のとおり、カードのような四角形を並べたスタイルのデザインです。多くの場合、ひとつの項目に対して画像やテキスト、ボタン等、様々な要素が含まれています。ECサイトやコンテンツの多いWebサイトでよく見かけるスタイルですね。 Etsyは手作りの商品を販売できるECサイト。商品の画像を大きく打ち出し、その商品に関する情報が掲載されています。ログインしていれば、詳細サイトにいかなくてもお気に入り登録などが可能。ページ移動をしなくてもなにかしら
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
Adobe Experience Design（XD）を使ってアプリのプロトタイプを作ってみた
2018年3月15日 XD, スマートフォン, 便利ツール 先日発表された、Adobeのプロトタイピングツール、Adobe Experience Design（Adobe XD）。Sketchライクなシンプルなグラフィックツールです。なにやら面白そうだったので、早速つついてみました。デモとして、簡単にチャットアプリのプロトタイプを作ってみたので、使用感とともに紹介します。 ↑私が10年以上利用している会計ソフト！ Adobe Experience Design（Adobe XD）って何？ Adobe XDはアプリやWebサイト等のデザインに使えるグラフィックツール。ただグラフィックが作成できるだけではなく、クリックやタップで次の画面に移動し、実際に動作しているようなプロトタイプも作成できます。それだけの機能がついて、なんと無料です！ 残念ながら今のところMac専用ツールですが、今年中にWi
制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ
2021年10月21日 便利ツール Webサイトや印刷物の制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日本ではアタリ・アテなどとも呼ばれますね。それらのダミーテキストやダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。いろんな種類のジェネレーターやサービスがあるので、うまく利用して時間短縮しちゃいましょう！ ↑私が10年以上利用している会計ソフト！ ダミーテキスト（英文） Lorem Ipsum ダミーテキストの大本命、Lorem Ipsum。Photoshopでも採用されている、「Lorem Ipsum…」から始まる有名なダミーテキストを生成できます。 Dummy HTML snippets for webdesigners HTMLタグ付きのダミーテキストのジェネレーター。左の要素を右側にドラッグ＆ドロップでカスタマイズできます。類
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！
2016年1月5日 CSS, JavaScript 昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します！ ↑私が10年以上利用している会計ソフト！ Flexboxって何？ FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃうボックスです。具体的には主に以下のような事を手軽に実装できます。 CSSを一行プラスするだけで横並びにできる！ 横並びになった要素の高さが最初から揃ってる！ 要素を上下左右、好きな順序に並び替えられる！ スペースの
Adobe製品の代わりに使える無料アプリ10+
2014年6月27日 Illustrator, Photoshop, 便利ツール PhotoshopやIllustratorなど、Adobeの製品はクリエイターの必需品のひとつとなっています。しかしその値段からなかなか手が出せない…という方も多いのではないでしょうか？今回はAdobe製品の代用として使える無料アプリをいくつか紹介します。金欠の学生さんや、様々な理由から脱Adobeを考えている方の参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ Photoshopの代わりに GIMP 長年Photoshopの代用として愛され続けているGIMP。Photoshopの拡張子であるpsdファイルが開けることはもちろん、Photoshop用のブラシなども利用可能。画像の編集・加工ツールとしてPhotoshopとほぼ同様の機能を備えています。日本語の公式チュートリアルも充実！私もお金の
新規顧客を逃さないECサイトデザイン
2014年5月12日 Webデザイン, ユーザビリティ ECサイトの構造はとっても複雑。ユーザーは好みの商品を検索し、その中から実際に購入するものを比較・検討・選択、さらにフォームに入力するというプロセスを経て、ようやく購入完了となります。オンラインショッピングに慣れている私でも、新規サイトでは苦労することが多いです。そこで使いやすいECサイト、特に新規客に優しいサイトデザインとはどんなものなのか、考えてみました。 ↑私が10年以上利用している会計ソフト！ 目的の商品ヘ素早くアクセス ECサイトはスピード勝負だとよく言われています。それはページの読み込み時間という体感速度はもちろんですが、いかに簡単に目的のページに到達できるかも大切です。特に何が欲しいのか決まっているというユーザー層は、急いでいるわけではありませんが、そのサイトに長居するつもりはありません。目的の商品を素早く表示するのはも
Create a Responsive and Multilingual Website in 5 min with Edicy
2014年7月23日 便利ツール 以前、元お隣さんが「非WEB屋でもサイトが作れる驚異的サービス／『サイトを作る』という敷居がどんどん低くなっていると実感する物色々」という記事でWeb制作の知識がなくても簡単にWebサイトを作れるサービスを紹介してくれていました。HTMLやデザインの知識がなくても、テーマを選んでコンテンツを入力すればサイトが作れるサービスがどんどん増えていますね。今回は同様のサービスですが、より多機能な「Edicy」を紹介しようと思います。 ↑私が10年以上利用している会計ソフト！ Edicyの特徴 動画を見てもわかる通り、Edicyは簡単にブラウザー上でWebサイトが作れるサービスです。 とにかく試してみましょう！ホームの「Try for Free」ボタンからアカウントを作成します。「.edicy.co」のドメインが取得できます。
嫌われまくりのIE6の現状と仲良く付き合う方法
2017年7月14日 Web関連記事, 便利ツール TwitterでWeb屋さんのつぶやきを見ていると「IE6のせいで…」「IE6さえなければ…」なんて声がよく聞こえてきます。産みの親からも見放されつつあるInternet Explorer 6。一体なぜここまで嫌われているのか？どれほどの人が涙を流してきたのか？そんなIE6と付き合っていく方法は？IE6にまつわる情報を簡単にまとめてみました。 ↑私が10年以上利用している会計ソフト！ IE6のシェア 2001年に世にリリースされたInternet Explorer 6。通称IE6。リリースされて10年たった今も色んな意味で話題のこのブラウザーを使っているユーザーは現在どれくらいいるのでしょう？ マイクロソフトが（！）IE6撲滅のため「Internet Explorer 6 Countdown」というサイトで世界中でIE6がどれくらい使われ
見落としがちなHTML5で変更された要素いろいろ
2013年3月23日 HTML, Webサイト制作 HTML5を勉強していて、section, nav, header, footerなどの新しく追加された要素について説明している記事はよく見かけるのですが、HTML5で変更された要素について触れている記事が少ないように感じたので、よく使うものを中心にちょっとまとめてみます。既存のWebサイトをHTML5化する時は、コンテンツ内に変更された・または廃止された要素がないか確認することも大切ですね！ ↑私が10年以上利用している会計ソフト！ HTML5の基本はここからお勉強！ 「ところでHTML5ってなに？」という方は、まずは以下の記事を読んでみてください。このようにHTML5の基本について解説している記事はたくさんあるので、詳しい説明は今回は端折らせて頂きます。変更点のみに焦点を当てますよ！ Webの3つの問題を解決する「HTML5」とは何な
Facebookページを自由にカスタマイズする方法 | Webクリエイターボックス
2017年6月29日 Webサイト制作, Webデザイン 最近会社でFacebookページを作成する事があり、楽しくてすっかりハマってしまったManaです。そのノリでここWebクリエイターボックスのFacebookページも作ってみました。そこで、Facebookページ作成中に役にたったコードやプラグイン・サイトを紹介します。 ↑私が10年以上利用している会計ソフト！ ※これは2010年に書かれた古い記事です。更新記事「Facebookページの作り方 2012年1月版」をご覧ください。 Facebookページのカスタマイズ概要 Facebookページの基本的な作成手順についてはかちびと.netさんが詳しく解説しています。なので、ここではFacebookページをHTMLやCSSでカスタマイズできるFBMLというアプリケーションやその他のプラグインを使った、もう少し踏み込んだFacebookペー
【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを
2013年3月23日 Photoshop 「少しの手間で大きく変わる、細部にこだわったWebデザインを」で紹介した「わずかな」加工を使ってボタンのデザインをかっこよくしよう！というチュートリアル記事です。前回の記事内にPhotoshopでの作成チュートリアルも載せたかったのですが、あまりにも長くなりそうだったので別記事にする事に。合わせて見てみてください！ ↑私が10年以上利用している会計ソフト！
WebサイトをiPhoneで見やすくする5つの方法
2017年6月29日 Webサイト制作, Webデザイン, 便利ツール iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://webcreatorbox.mobify.meにリダイレクトされます。（されてなかったら直接http://webcreatorbox.mobify.meからドウゾ…）今回は下記に説明するmobifyというサイトからiPhone用サイトを作りましたが、他にも便利な方法があったので紹介してみます。 ↑私が10年以上利用している会計ソフト！ 1. CSSのみで切り替える iPhone用に作成したCSSを作り、デバイスの幅によって使用するCSSを切り替えます。 <link rel
少しの手間で大きく変わる、細部にこだわったWebデザインを
2017年6月29日 Webデザイン 「デザインしてみたけどなんだか物足りない…」そんな経験ありませんか？私はよくあります。それで色を変えてみたり、形を変えてみたりと色々試してみるのですが、結局どれもしっくりこなかったり。そんな時は元のデザインにほんの少し手を加えるだけで納得のいくデザインに変わることが多いんです。わずかな装飾で大きく印象を変える。そんな「ひと手間」に注目してみましょう！ ↑私が10年以上利用している会計ソフト！ 追記：Photoshopを使った加工の仕方を記事にしてみました！ » 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを グラデーションを加える 「デザインしてみたけどなんだか物足りない…」そんな時はわずかなグラデーションを加えるだけで立体感がでて、ノッペリしたデザインを一新することができます。アレコレ装飾するよりもシンプルかつ王道。 ヘッダーの
Twitter 人気のつぶやき 7/23～7/29 2011
2013年3月23日 話題のWeb関連情報 WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ 1. PNGとGIFとJPEG…Web用画像の書き出し、どんな風に使い分けていますか？ この記事をRTする 2. Macを初めて触るときに知っておきたかったこと この記事をRTする 3. 保存アイコンの謎には納得／今までコンピューターに1度も触ったことなかった男性（60歳）初めてインターネットをする！ この記事をRTする 4. Webデザイン：思わず二度見してしまうようなファンキーでかっこいいヘッダーのWebサイトいろいろ この記事をRTする 5. アー
海外在住Web屋の私のまわりで最近話題の5つのWebサービス
2013年3月23日 Web関連記事, 便利ツール Web業界では次々に新しいサービスが開発され、それをあーだこーだと言い合うのがWeb屋の楽しみってもんです。現在私が住んでいるバンクーバーでも同様、Webサービスの話に花が咲きます。その中でサービス自体は前々からありますが、最近よく話題にでるなーというものを中心に紹介していきます！日本で何かWebサービスを作ろうとしている方のアイデアの種になるかも？ ↑私が10年以上利用している会計ソフト！ 1. Fiverr Fiverrは5ドルで誰かにサービスや商品を提供できるサイトです。誰でも簡単にアカウントを作成でき、5ドルで売りたいもの・5ドルで買いたい物を投稿できます。5ドルのうち1ドルがFiverrの収益になります。支払いはPaypalかクレジットカード。英語のみですが、同じ英語圏でも通貨の価値に差のある国では5ドルでもいい収入になるようで
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス
2017年7月14日 便利ツール 久しぶりに自分がブックマークしているサイトを整理してみました。昔から変わらず愛し続けているWebサービスやチュートリアルサイトなど多数あったので一挙にご紹介します！有名どころからあまり知られていないけど便利なサイトまで、多数あるので時間のある時にじっくり見てみてください！ ↑私が10年以上利用している会計ソフト！ ブックマークしているサイト 目次 Webサービス デザイン関連 画像関連 CSS jQuery WordPress フォント スマートフォン 配色関連 HTML5 メルマガ Webサービス 1. Sendoid Sendoidは会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生成されます。パスワード設定可。 2. HTMLエンコードフォーム HTMLエンコードフォームは特殊記号などをエンコード・デコードしてくれるWebサービ
記事を簡単に編集できるWordPressプラグイン「Front-end Editor」
2013年3月23日 Wordpress 次のプロジェクトで「クライアントが管理ページに行かずに簡単に編集できる方法」を探していたところ、「Front-end Editor」というなんとも便利なプラグインを発見しました！ログインした状態でサイトに行くと、管理画面に行かなくても直接コンテンツを修正できるという優れもの。ということで早速Front-end Editorを紹介します！WordPressを利用している方、クライアントがWordPressを利用する予定の方、ぜひぜひ実装してみてください！ ↑私が10年以上利用している会計ソフト！ Front-end Editorをインストールする まずはインストール。自動インストールする場合はWordPressの管理画面のプラグイン欄にある「新規追加」をクリック。Front-end Editorで検索してインストールします。インストール後、有効化すれ
Web屋さんのための新年の抱負アイデア24
2017年6月29日 Web関連記事, ライフハック 2011年がスタートしましたが、「なんだか調子でないなー」という方！今年の目標はもう設定しましたか？私は毎年「新年の抱負」を考えているのですが、今年は何にしましょう？ということで、Web屋さんが設定できそうな新年の抱負案を考えてみたので、参考にしつつ新年の抱負を考えてみてはいかがでしょう？ ↑私が10年以上利用している会計ソフト！ 1. CSS3の勉強をする 角丸・グラデーションをはじめ、画像を使わなければできなかった効果がCSS3を使えば簡単に実装できます。デザインの幅がぐんっと広がります。IEで対応していないなどの問題もありますが、CSS3 PIEを使えばIEでも使えるようになりますよ。 CSS3リファレンス CSS3のリファレンスサイト。コードの例もわかりやすいです。 たった一行を追加するだけでIE6/7/8をCSS3対応にする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
