デザインを開発するという視点でお伝えするクリエイティブBLOG
一般的なサイトを制作するよりもPHPや独自タグなど様々な知識が必要となるWordpressテーマの制作。普段から利用している方であればそこまで難しくない事かもしれませんが、HTMLタグの範疇からまだ出ていない技術者にとっては敷居が高いと作業だと思います。今日紹介するのはブラウザで確認しながらベーステーマが制作できるWPテーマジェネレーター「Wordpress Theme Generator」です。
上記のようなWPで完成されたサイトを見ながら右のメニューでカスタマイズする事が可能です。
詳しくは以下
デザインにラフなテイストを表現するために、手描きで文字を書いてはめ込むこともあると思いますが、なかなか思い通りの雰囲気ぴったりに書くことは、文字を描く際のクセもあるためなかなか難しいもの。そんな時に活用したい、手書き風の質感が手軽に表現できるフリーフォントまとめ「20 Amazing Free Handwritten Fonts for Your Designs」を紹介したいと思います。
Recorda Script Personal Use Onl font by Måns Grebäck – FontSpace
さまざまなテイストの手書きフォントが紹介されており、欲しいデザインのイメージに合わせて選ぶことができます。
詳しくは以下
フォントは太さや全体のバランスによって、見た目の印象やインパクトがかなり変わってくるもの。目を引きたい、デザインを強調したい時には太めのフォントが有効です。今回はそんな時に使用したい、ボールド系・見た目に印象的なフリーフォントが揃った「40 Free Beefy And Bold Fonts You Should Grab」を紹介したいと思います。
比較的太さがあったり、しっかりとした形をしているなど、デザインを力強く演出してくれそうなフォントが紹介されています。
詳しくは以下
Webデザインを構築するのに欠かせないCSS。基礎からアニメーションなどの特殊な効果まで、様々なことが行なえます。今回ご紹介するのは、そんなCSS構築の作業を手助けしてくれる、便利なWebツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」です。
Palettes | Flat UI Colors 280 handpicked colors ready for COPY & PASTE
オンライン上で手軽に様々な効果や設定を試し、導入することができるツールが40種類紹介されています。その中から幾つかおすすめのツールをピックアップしましたのでご覧ください。
詳しくは以下
Clippy — CSS clip-path maker
Clippyは画像を切り抜くフレームの形を自由に調整することができるWebツールです。星や丸などベースとなる図形を27種類の中から選ぶことが出来、自由に編集できます。
CSS Colour Gradients with GradPad, beautiful CSS color gradient generator for your designs
トレンドのグラデーションをCSSで表現できるWebツールです。背景にグラデーションを使いたいときなど、大きい面積でグラデーションを取り入れたいときに。
Trianglify.io · Low Poly Pattern Generator
流行のポリゴングラフィックをCSSで表現するためのツールです。目の細かさや角度、色味などをカスタマイズでき自由度も高いです。
最適なツールを利用することで、クオリティの高いコーディングを短時間で完結することができます。サイトには他にも活用する機会の多いWebツールが多数紹介されていますので、興味をお持ちになられた方は是非下記リンク先よりご覧になってみてください。
Designdevelopでは今まで「羽ばたく鳥のベクターデータセット「BB Free Vectors: Birds in Flight」」や「230本収録！マーカーのベクターデータ集「230 Marker Illustrator Brushes」」といった様々なベクターデータを紹介してきましたが、今回紹介するのは花や植物に特化したフリーベクターデータ集「Vector Daisies」です。
全部で10のベクターデータが公開されていて、様々なテイストの花、植物のベクターデータが公開されています。今日はその中からいくつかのベクターデータをピックアップして紹介したいと思います。
詳しくは以下
明るく楽しげな雰囲気を演出するのに最適なレインボーカラーは、カラフルな配色を利用してさまざまなデザインに利用されています。そんな中今回紹介するのが、カラフルポップな雰囲気を演出できるレインボーパターンをまとめた「A Collection of 90+ Vibrant Rainbow Colored Patterns」です。
（Stripidy Patterns by ~danionimvu on deviantART）
さまざま種類のレインボーカラーをテーマにしたパターンが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBデザインに使える背景素材についてはDesigndevelopでも「花柄の背景素材を集めた「60+ Floral Patterns, Backgrounds」」や「もう背景には困らない！デザイナーのための背景リソース集「36 Must Have Backgrounds and Patterns Resources」」などと数多く紹介しましたが、今日紹介する「200+ Beautiful Seamless Patterns Perfect for Web Design」もそんな背景画像を集めたまとめエントリーです。
POPなものから柄物、質感があるものなど様々なテイストの背景デザインが収録されていますが、今日は気になった背景素材をいくつかピックアップして紹介したいと思います。
詳しくは以下
デザイン制作時に選ぶフォントによって、ユーザーに与える印象は大きく変わり、デザインに合わせてオリジナルタイポを制作するということも多いと思いますが、クオリティの高いタイポを作り上げるには時間と手間がかかります。そんな中今回は、デザイン性の高いフォントの中から、ふわふわの可愛らしい雰囲気が表現できるフォントをまとめた「27 Cool and Fluffy Puffy Font for Free」にクローズアップして紹介したいと思います。
Bumbazoid font by Boba Fonts – FontSpace
雲のような雰囲気のフォントから、マンガの効果音で使われそうなポップなフォントまで、さまざまなフォントが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
ユーザーが運営側に問い合わせを行いたい時に利用するコンタクトフォーム。基本シンプルなタイプを見かけることがほとんどですが、デザインにこだわりを見せるwebサイトはフォームも一味違ったクリエイティブ要素の高いものとなっているようです。そこで今回は、デザイン性の高いフォームデザインのあるwebサイト集「25 Excellent Examples of Forms in Web Design」を紹介いたします。
（Contact Vincent Mazza, Morris County’s top Web Site Design and Graphic Designer）
デザインのテイストに合わせて、通常のコンタクトフォームとは一線を置いたユニークかつ、デザイン性の高いフォームを持ったwebサイトがまとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。
webサイトを制作する時に必ず必要になってくるメタ。タイトル、ディスクリプション、画像といった基本情報は、FacebookやTwiiterなど媒体別の設定をしておくことで、よりサイトの精度が高まります。今回はそんな媒体別のメタタグを表示してくれるwebサイト「HEY META」を紹介します。
現在設定されているメタをベースに、それぞれに最適なメタと記述を簡単に生成することができます。
詳しくは以下
背景を透過することができたり、フルカラーで保存すれば劣化が少ないなどのメリットがあるPNG画像。WEBデザインに使用する機会も多いものですが、フルカラー保存となると、画像サイズが大きくなってしまって困ることも少なくありません。そんなときに役立つ「UPNG」を今回はご紹介していきます。
簡単な操作でソフトのダウンロードも不要。便利なオンラインの圧縮サイトになります。
詳しくは以下
