日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう | Webクリエイターボックス
2021年12月6日 CSS フラットデザインが流行ってからは、背景を一色で塗りつぶしたデザインのサイトが多くなりました。しかしそれだけではなんだか味気ない！という事で、CSS3のアニメーションを使って、徐々に色を変化させてみましょう！色の組み合わせや順番を調整して、パッと目を引くデザインに！ ↑私が10年以上利用している会計ソフト！ Themifyではホームのファーストビューでビビッドな色を少しずつ変えながら表示しています。今回目指すのはこんな感じの背景です。このサイトではJavaScriptにより色の移り変わりを実装しているようですが、CSS3のキーフレームアニメーションだけでも表現できます！ CSS3 キーフレームアニメーションの基本 まずは要素を徐々に変化させるアニメーションについて覚えていきましょう！CSS3の animation プロパティでは、キーフレームを設定して細かい動き
HTMLメール制作のコツや便利なサービスいろいろ
2017年2月1日 Webサイト制作, マーケティング, 便利ツール みなさん、購読しているニュースレター（メールマガジン）はありますか？私は利用しているWebサービスや趣味関連のものをあわせてだいたい10サイトくらい購読しています。どれも素敵なデザインのHTMLメールばかりで、見ていて楽しくなっちゃいます :) そんなわけで今回はそんなHTMLメールの現状や、制作時のTipsを紹介します。効果的な導入方法を一緒に考えてみましょう！ ↑私が10年以上利用している会計ソフト！ HTMLメールとは テキストのみのメールではなく、テキストに色がついていたり、画像が挿入されている、HTMLを使って設計されたメールのことをHTMLメールと呼びます。海外では大手Web系企業をはじめ、多くの会社がHTML形式のニュースレターを配信しています。私が購読しているWebサービスのニュースレターやブログの更新通
WordPressのカスタム投稿タイプでメンバー紹介ページを作成
2014年8月22日 Wordpress 先日公開したFrogのサイトは例のごとくWordPressを使って制作しました。ブログで使う「投稿」や、その他の「ページ」とは区別して、これからも増えていくであろうチームメンバーの一覧＆詳細ページを、カスタム投稿タイプという機能を使って作成したので手順を公開。企業サイトに従業員一覧ページを用意しているところも多いと思うので、参考になれば幸いです。 ↑私が10年以上利用している会計ソフト！ 目次 目標 – こんなページを作ります カスタム投稿タイプとは カスタム投稿タイプの設定 コンテンツを入力 テーマファイル：個別ページ テーマファイル：一覧ページ パーマリンクの設定 コード全文 目標 – こんなページを作ります Frogのチームメンバーページを実例として紹介します。カスタム投稿タイプを設定するためのWordPressプラグインもありますが、今回は
コーディング規約を作ろう
2017年1月6日 Webサイト制作, 便利ツール コーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 ↑私が10年以上利用している会計ソフト！ コーディング規約に含むべき項目 ディレクトリー階層 ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「
とあるフリーランスWebデザイナーの一日
2017年7月14日 フリーランス, 便利ツール フリーランスとして働いている人は、なかなか他の人の働き方を知る機会がないのではないでしょうか？どんな風に時間管理してるんだろう？どんなツールを使ってるんだろう？などなど、気になるけど、聞くまでもないかな…なんて…。最近そのような、フリーランスの働き方についての質問メールをいくつか頂いたので、フリーランスのWebデザイナーである私の一日を追ってみました（自分で）。いつも業務に使っているWebサービスや便利なツールも紹介しています。ほとんどが無料サービスなので必見ですよ！ ↑私が10年以上利用している会計ソフト！ 5:30 起床 朝は早いです。逆立ちをして（！）目を覚まします。逆立ちなんて相当集中していないとできないので、一気に目が覚めます。 その後Macを開いてメールチェック。メールクライアントはMac付属のMail。すぐ返信するもの、後で返
Web業界で活躍する日本人の素敵な名刺デザイン 2013年版
2016年2月18日 インスピレーション, 名刺 名刺を交換する度に思うことですが、やはり名刺に書かれた内容やデザインが会話のネタになる事が多いです。素敵なデザインの名刺はもらっても嬉しいですよね！今回日本のクリエイターの方に名刺を頂く機会があったので、以前書いた「国内Web業界で活躍する方の素敵な名刺デザインいろいろ」の2013年版という事で記事にまとめてみます。デザインの参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ オフ会に参加しました 仲良しのバンクーバーのうぇぶ屋のセナ君がカナダから日本に一時帰国するってことで、5月25日に大阪で開かれた「バンクーバーな僕らと仲良しになろうパーティー！」に参加してきました！鹿児島からの参加者や、東京から日帰りで〜なんていう強者も…！仲良くしてくださった皆さんありがとうございます！ 私はバンクーバーな僕らというWebマンガの登場
Create Websites Without Writing Code Using Adobe Muse
2014年8月17日 Webサイト制作, 便利ツール グラフィックデザイナーさんの中にはWebデザインに挑戦したいと思っている人もたくさんいると思います。それでもなかなか一歩踏み出せないのはマークアップやコーディングがなんだか難しそうだからではないでしょうか？先日、ロンドンで出会ったグラフィックデザイナーさん達と話して、「タグの文字列を見ただけで蕁麻疹が…」というように食わず嫌いのソースコード恐怖症な方が多いようで、どうにかしてその思いを払拭できないか？Webデザインの楽しさを伝えられないか？と思い、印刷デザイン感覚でWebサイトが作れる「Adobe Muse」を紹介しようと思います。 ↑私が10年以上利用している会計ソフト！ Adobe Museとは？ 「Adobe Muse」はデザイナーさん達御用達のAdobeが提供する、印刷物をデザインする感覚でWebサイト制作できるアプリです。HT
How to Learn iPhone App Development for Non-Programmers
2014年8月17日 スマートフォン 「iPhone/iPadアプリを作るのは難しい」。デザイナーの人は特にそう思い込んでいませんか？確かに新しいプログラミング言語を習得するには時間がかかります。しかし、一度「楽しい！」と思えばこっちのものです。その気持ちだけで難しいものも簡単に乗り越えてしまえるもの。そう、もう無敵です！どんなアプリでも作れるようになります！ここではアプリの開発方法よりも、「どうやって楽しく学習できるか」に焦点を当ててみたいと思います。 ↑私が10年以上利用している会計ソフト！ 準備しよう 必要なもの Mac OS Lion iOSアプリの開発は基本的にMac OSですすめることになります。Apple Storeでポチッちゃいましょう :P XCode 4 iPhone/iPadアプリの開発にはXcodeが必要になります。App Storeで最新のXcodeをダウンロード
本書きました「Webクリエイターズガイドブック」
2014年8月19日 お知らせ この度「Webクリエイターズガイドブック」という本を書かせて頂きました。実は昨年12月の末に発売されていたのですが、年末でバッタバタだったので告知がこのタイミングとなりました。ブログやTwitterで告知していなかったのに発売されてすぐ購入して頂いた方もいたようで…本当にありがとうございます！それではここで少し本の内容を紹介したいと思います。 ↑私が10年以上利用している会計ソフト！ コンテンツ 「Webサイト制作とはなんぞや？」という初心者さんが、この本を見ながらひとつのサイトを完成させる事ができるような、そんな内容になっています。 今求められているWebクリエイターとは 計画をたてよう デザインの基礎 Photoshopの基礎 細部にこだわったWebデザイン 実際に作ってみよう！①Photoshop編 HTMLの基礎 実際に作ってみよう！②HTML編 C
「焼肉 三十八」のリニューアルをしました！
2011年11月8日 Webサイト制作, Webデザイン こんにちは、ブログを書きつつちゃんとフリーランスのWebデザイナーとしてお仕事しています、Manaです。先月あたり「焼肉 三十八」様のWebサイトリニューアルのお手伝いをさせて頂いたのでそのレビューなんぞを紹介します。デザインや構成など、サイトリニューアルする上で参考になる部分があれば幸いです。 受注 福岡県でホームページ制作、広告運用等を手がけているCDP様より「焼肉 三十八」様のWebサイトリニューアルの依頼を頂きました。 簡単なリニューアル時のご要望をまとめると下記６点でした。 お知らせ欄は更新可能 WordPressで構築 写真やテキストは流用 携帯版作成（コンテンツは一緒） ブログ・口コミ掲示板は削除 IE6は非対応でOK（ありがとうございます！！！） 制作にかかわるお打ち合わせはCDP社デザイン担当の松野氏とSkypeや
電子書籍を自分で出版してみよう！
2016年6月8日 Web関連記事, ダウンロード, 便利ツール スティーブ・ジョブズ氏の公式伝記が販売されて、各書店を賑わせてますね。この本は紙の書籍だけでなく電子書籍でも販売されています。iTunesストアでは本日もちろん一位に輝いています。そんな電子書籍を読みながら「電子書籍ってどうやって作れるのかなー？」なんて疑問に思ったので調べてみました。出版業界の人でなくても、「自分の本を出版する」ってなんだかワクワクしますよね。さっそく見てみましょう！ ↑私が10年以上利用している会計ソフト！ 電子書籍ってどんなもの？ 電子書籍とは、PC・MacやAppleのiPhoneやiPad、AmazonのKindleなどのディスプレイで読める書籍のこと。書籍はインターネット上で購入、ダウンロードします。ファイルを用意するだけでコンテンツを提供できるので、紙の書籍よりも低コストで手軽に作成できます。デ
インスピレーションの宝庫！Web制作会社のポートフォリオWebサイト35
2017年7月14日 Webデザイン, インスピレーション 先週末、ぼけーっと世界各国のWeb制作会社のWebサイトをひたすら眺めていました。デザイン・Web制作会社のWebサイトって細かいところまで気をきかせていたり、クスッと笑ってしまうような仕掛けがあったりして、見ていて飽きないんですよね。さらにそのサイトだけでなく、彼らの作る作品も素敵なものが揃っているという点もおもしろいです。そんなWeb制作会社のWebサイトと、その見どころを紹介します！ ↑私が10年以上利用している会計ソフト！ Web制作会社のサイトの特徴 Web制作会社のポートフォリオサイトを眺めていて、いくつか発見があったのでまとめてみます。 制作実績 多くの会社がjQueryなどを使って動きをつけて作品を紹介していました。また、以下の情報を載せているサイトが多かったです。 スクリーンショット クライアント名 制作したサイ
特殊な用紙・加工でかっこいい名刺が作れる印刷会社いろいろ
2013年7月8日 フリーランス, 便利ツール, 名刺 以前も「印象に残る名刺の作り方」などで名刺デザインについて触れたのですが、「こんな名刺はどこで印刷してもらえるの？」という質問をいくつか頂いたので、今さらながらまとめてみました。和紙や木目の素材、透明な名刺や型押し加工など、思い通りのデザインが実現できるかも！オンラインで注文できるので、気軽に利用してみてください！ ↑私が10年以上利用している会計ソフト！ データ入稿ガイド 今回紹介する印刷会社さんはすべてデータ入稿可能です。どの会社もデータ入稿専用のテンプレートが用意されているので、ダウンロードしてデザインします。用紙やオプション加工によってテンプレートが異なる場合があるので注意。データの種類や対応バージョンも事前によく読んでおきましょう。また、どの会社も用紙やオプション加工の無料サンプルを注文できるので、デザインし始める前に質感な
【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを
2013年3月23日 Photoshop 「少しの手間で大きく変わる、細部にこだわったWebデザインを」で紹介した「わずかな」加工を使ってボタンのデザインをかっこよくしよう！というチュートリアル記事です。前回の記事内にPhotoshopでの作成チュートリアルも載せたかったのですが、あまりにも長くなりそうだったので別記事にする事に。合わせて見てみてください！ ↑私が10年以上利用している会計ソフト！
少しの手間で大きく変わる、細部にこだわったWebデザインを
2017年6月29日 Webデザイン 「デザインしてみたけどなんだか物足りない…」そんな経験ありませんか？私はよくあります。それで色を変えてみたり、形を変えてみたりと色々試してみるのですが、結局どれもしっくりこなかったり。そんな時は元のデザインにほんの少し手を加えるだけで納得のいくデザインに変わることが多いんです。わずかな装飾で大きく印象を変える。そんな「ひと手間」に注目してみましょう！ ↑私が10年以上利用している会計ソフト！ 追記：Photoshopを使った加工の仕方を記事にしてみました！ » 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを グラデーションを加える 「デザインしてみたけどなんだか物足りない…」そんな時はわずかなグラデーションを加えるだけで立体感がでて、ノッペリしたデザインを一新することができます。アレコレ装飾するよりもシンプルかつ王道。 ヘッダーの
Webデザイナーになりたい！Web制作会社で働く為の就活ガイド
2013年3月23日 Web関連記事 以前書いた「Webデザイナーになりたい！就活に打ち勝つポートフォリオWebサイトの作り方」に引き続き、「Webデザイナーになりたい！」シリーズ第二弾！勝手にシリーズ化しました。今回はWeb制作会社で働くために知っておきたい事、応募や面接の際に役立ちそうな知識をまとめてみよう…と思ったのですが、私自身面接を受けた経験があまりない上、日本のWeb制作会社で働いた事がないので、４人のWeb制作会社の代表の方にインタビュー形式でお答え頂きました！ ↑私が10年以上利用している会計ソフト！ 今回インタビューに応じてくださった皆様 ふとこの記事の企画を思いついて、即Twitterで募集をかけました。ご協力くださった皆様、ありがとうございます！ 梅原卓也氏 株式会社グラブデザイン Twitter – @umehara_takuya Facebookページ – Gra
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス
2017年7月14日 便利ツール 久しぶりに自分がブックマークしているサイトを整理してみました。昔から変わらず愛し続けているWebサービスやチュートリアルサイトなど多数あったので一挙にご紹介します！有名どころからあまり知られていないけど便利なサイトまで、多数あるので時間のある時にじっくり見てみてください！ ↑私が10年以上利用している会計ソフト！ ブックマークしているサイト 目次 Webサービス デザイン関連 画像関連 CSS jQuery WordPress フォント スマートフォン 配色関連 HTML5 メルマガ Webサービス 1. Sendoid Sendoidは会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生成されます。パスワード設定可。 2. HTMLエンコードフォーム HTMLエンコードフォームは特殊記号などをエンコード・デコードしてくれるWebサービ
空いた時間でお小遣い稼ぎ！フリーランスWeb屋さんにおすすめのサブプロジェクト
2017年7月14日 フリーランス フリーランスWeb屋さんの皆さん、フリーランスの仕事はどうやって探していますか？また、依頼がない時のサブプロジェクトは持っていますか？会社をやめ、フリーランサーとして仕事を始めたばかりの頃は、多くの人が「依頼のない、空白の時間」を体験してしまいがちです。そんな期間を有効活用すれば、フリーランスとしての収入も増えると同時に自分のスキルを磨く事もできます。今回はフリーランサーさんの「サブプロジェクト」に焦点をあててみたいと思います。 ↑私が10年以上利用している会計ソフト！ まずはブログ・Twitterをはじめよう まだ自分のブログとTwitterアカウントを持っていない人は、今すぐはじめてください。なぜならこれらのツールは自分を宣伝する道具としてとても有効だからです。例えばサブプロジェクトとしてWebサイト用デザインテンプレートを作ったとしても、宣伝するツ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
