2016年12月26日 Web関連記事, お知らせ 今年も残りあとわずか！一年間お世話になりました！Webクリエイターボックスも間もなく5周年です！毎年思いますが早いですねー。という事で例年どおり、Webクリエイターボックス内でよく読んでもらった記事トップ10などを紹介しようと思います。いくつ覚えていただけてますかね？ :3 ↑私が10年以上利用している会計ソフト！ Webクリエイターボックス〇〇年振り返る記事シリーズ 2010年 2011年 2012年 2013年 2014年 2015年 アクセスの多かった記事 トップ10 今年書いたものでアクセスの多かったものトップ10。 1. かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました 男性が苦手としがちなかわいい系デザインに使える素材やフォント、配色、実例サイトなどを紹介。きゃわわ。 この記事をRTする 2. 背景に動画

2015年12月28日 SVG モーフィングとは、ある図形から別の図形へと自然に変形するように中間の画像を補正して映像を見せる技法です。Flashでは「シェイプトゥイーン」でモーフィングを表現していましたね（懐かしい！）。CSS3のアニメーションだと、画像の移動・回転なんかはできちゃいますが、形そのものを変形させるのは難しいです。SVGを使えば、そんなアニメーションも作成可能！さっそく挑戦してみましょう！ ↑私が10年以上利用している会計ソフト！ 追記（2015年12月28日）：SMILはSVG次期バージョンから非推奨となるようです。 Intent to deprecate: SMIL – Google Groups SVGモーフィングを使った例 SVGモーフィングとはなんぞや？ってことで、まずは以下の作例をご覧ください。徐々に変化していく様子がおもしろいですね！ リンク先ではバットマンの

2017年7月14日 Webデザイン, ダウンロード, 色彩 今月はじめに初めて箱根旅行で洗練された美しい温泉宿に宿泊して以来、「和」な雰囲気やデザインの素晴らしさに魅了されたManaです。伝統的な配色や配置、書体等、見ていて飽きの来ない魅力がありますよね！和風デザインには大きく分けて4つの特徴があります。それぞれの特徴を理解し、うまくデザインに反映していきましょう！ ↑私が10年以上利用している会計ソフト！ 1. 配色 「和風デザイン」と聞いて思いつくのはどんな色でしょうか？おそらくビビッドなピンクや透き通るような水色ではなく、わさびやからし、えんじのような、少しくすんだ色合いを思いつく人が多いかと思います。日本には伝統的な色や配色というものが存在し、それらを上手に使うことでグッと和の雰囲気漂うデザインに近づきます。 伝統色 日本の伝統色 和色大辞典では日本の伝統色をカラーコードとともに

2016年10月27日 Wordpress CSSの小技やjQueryの小技、スマートフォン対応など、これまで様々な小技集を紹介してきました。そこで今回はWordPressの小技を紹介しようと思います！基本から応用まで、簡単なコードで設置可能なので、WordPress初心者さんでも大丈夫！みなさんのサイトに合わせてカスタマイズしてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 カスタムメニューの設置 アイキャッチ画像（サムネイル画像）を利用する 検索ワードをハイライト Twitterのユーザー名を自動的にリンクさせる デバイスによってコンテンツ変える 画像を挿入する際、P タグで囲まないようにする 「続きを読む」リンクをカスタマイズ ショートコードを作成 ショートコードをテンプレートファイル内で実行する 古い記事にメッセージを表示する RSSフィードに画像を追加 記事に含まれ

2017年1月11日 Web関連記事, 便利ツール 作業中、ちょっと行き詰まった時は別の事をして脳のリフレッシュ！Webデザイナーさん向けのものを中心に、ブラウザー上で遊べるミニゲームをいくつか紹介します。もちろん楽しむだけではなく、デザインや制作のスキルアップにつながりそうなミニゲームも！一人でも、同僚とわいわい話しながらでも楽しめますよ！ ↑私が10年以上利用している会計ソフト！ Web制作関連 Draw a Square Draw a Square 指定されたサイズのボックスをドラッグして描写し、どれくらい一致したかでスコアを競う簡易ゲーム。シンプルなゲームですが、サイズ感を身につけられますよ。 Whatpx Whatpx こちらもサイズ系。表示された黒い部分の幅（ピクセル数）をあてるゲームです。1px単位までサイズを極めたい方へ！ Dedesign the Web 2 Dedesi

2020年11月14日 jQuery, アクセシビリティ 多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ ↑私が10年以上利用している会計ソフト！ こちらのGif画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常のHTMLとCSSを使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみに

2014年12月16日 便利ツール ファイルのバージョン管理＆プロジェクト管理ができるuniversions。昨年のクローズドベータ版の頃に開発者さんに紹介していただき、かわいらしいデザインと使いやすさからずっと応援していたツールです。「デザイナー向けにGitなどを優しく解説する記事はありますが、どうしても構築の手間や敷居の高さがあるのではないか…」という開発者さんの思いがうまく反映され、使われている言葉もわかりやすく、スッキリとしたデザインになっています。どんな方でも安心して使いこなせるはず。先月ついに正式版がリリースされたので、簡単に紹介します！ ↑私が10年以上利用している会計ソフト！ エンジニアじゃなくても簡単に使える管理システム これまでのバージョン管理システムとは違い、黒い画面になにやら記述しなくても、クリックするだけでファイルの履歴管理ができます。間違えてファイルを上書き保存

2014年6月30日 SVG 以前書いた「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。基本的な記述方法を覚えて実用化していきましょう！ ↑私が10年以上利用している会計ソフト！ SVGにリンクを貼る SVGにリンクを貼りたい場合、単純に a タグで svg を囲んでもうまくリンクを貼ることはできません。svg タグの中のオブジェクトを a タグで囲み、xlink:href 属性でURLを指定する必要があります。 <svg ... > <a xlink:href="http://google.com"> <path fill="#1E899D" ... > </a> </svg> See the Pen SVG

2014年6月27日 Illustrator, Photoshop, 便利ツール PhotoshopやIllustratorなど、Adobeの製品はクリエイターの必需品のひとつとなっています。しかしその値段からなかなか手が出せない…という方も多いのではないでしょうか？今回はAdobe製品の代用として使える無料アプリをいくつか紹介します。金欠の学生さんや、様々な理由から脱Adobeを考えている方の参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ Photoshopの代わりに GIMP 長年Photoshopの代用として愛され続けているGIMP。Photoshopの拡張子であるpsdファイルが開けることはもちろん、Photoshop用のブラシなども利用可能。画像の編集・加工ツールとしてPhotoshopとほぼ同様の機能を備えています。日本語の公式チュートリアルも充実！私もお金の

2014年5月12日 Webデザイン, ユーザビリティ ECサイトの構造はとっても複雑。ユーザーは好みの商品を検索し、その中から実際に購入するものを比較・検討・選択、さらにフォームに入力するというプロセスを経て、ようやく購入完了となります。オンラインショッピングに慣れている私でも、新規サイトでは苦労することが多いです。そこで使いやすいECサイト、特に新規客に優しいサイトデザインとはどんなものなのか、考えてみました。 ↑私が10年以上利用している会計ソフト！ 目的の商品ヘ素早くアクセス ECサイトはスピード勝負だとよく言われています。それはページの読み込み時間という体感速度はもちろんですが、いかに簡単に目的のページに到達できるかも大切です。特に何が欲しいのか決まっているというユーザー層は、急いでいるわけではありませんが、そのサイトに長居するつもりはありません。目的の商品を素早く表示するのはも

2014年3月28日 CSS, Webサイト制作 ちょうど今作っているサイトで、経歴をタイムラインで表現するページがあったのでコードを紹介。コード自体はとってもシンプルなので、カスタマイズ次第でどんなデザインのサイトにもあわせられると思います。文章にするとゴチャゴチャしがちな経歴・沿革をスッキリと表示しましょう！ ↑私が10年以上利用している会計ソフト！ サンプル Chrome, Firefox, Safari, IE9・10で動作確認。 See the Pen Timeline by Mana (@manabox) on CodePen. モバイルファーストってことで、640px未満の幅のデバイスには年月・見出し・詳細文章を順に表示します。 モバイル版はこんな感じ。サンプルページの画面の幅を調整して比較してください。 HTML timeline というクラスのついたリストの中の li タ

2014年2月19日 スマートフォン, ユーザビリティ スマートフォンを使ってWebサイトを閲覧する人、どんどん増えてきています。モバイルブラウザーのシェアを見ても、そのユーザー数は無視できないものとなっています。サイトによってはデスクトップで閲覧する層より多いところもあるかもしれませんね。私がWebサイトの制作依頼を受けた際、モバイル対応は必須としてきましたが、モバイルユーザビリティについて再考してみたので、今回はナビゲーションメニューについて簡単に記事にしてみます。 ↑私が10年以上利用している会計ソフト！ よく見かけるWebサイトのナビゲーションメニュー 人気Webサイトギャラリー「The Best Designs」に掲載されている多くのWebサイトはメニューアイコンをロゴとともに画面上部に掲載しているのをよく見かけます。よく見かけるからと言ってこの場所に設置するのが本当に使いやすい

2021年10月21日 便利ツール Webサイトや印刷物の制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日本ではアタリ・アテなどとも呼ばれますね。それらのダミーテキストやダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。いろんな種類のジェネレーターやサービスがあるので、うまく利用して時間短縮しちゃいましょう！ ↑私が10年以上利用している会計ソフト！ ダミーテキスト（英文） Lorem Ipsum ダミーテキストの大本命、Lorem Ipsum。Photoshopでも採用されている、「Lorem Ipsum…」から始まる有名なダミーテキストを生成できます。 Dummy HTML snippets for webdesigners HTMLタグ付きのダミーテキストのジェネレーター。左の要素を右側にドラッグ＆ドロップでカスタマイズできます。類