TOP  >  ウェブデザイン

Tag : ウェブデザイン

2018年12月03日

雑誌のようにめくって閲覧できるアニメーションテンプレート「Page Flip Layout」

コンテンツをクリエイティブにデザインするために、アニメーションを用いたレイアウトを取り入れることはとても効果的です。今回は雑誌を読むようにページをめくって閲覧できるアニメーションテンプレート「Page Flip Layout」をご紹介します。

gazou2

ファッション雑誌のように美しく写真をレイアウトすることができ、アニメーション効果でデザインをリッチにすることができます。

詳しくは以下

(さらに…)

続きを読む
このエントリーをはてなブックマークに追加
2018年06月30日

WebデザインをオンラインでサポートしてくれるCSS作成オンラインツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」

Webデザインを構築するのに欠かせないCSS。基礎からアニメーションなどの特殊な効果まで、様々なことが行なえます。今回ご紹介するのは、そんなCSS構築の作業を手助けしてくれる、便利なWebツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」です。

40-free-web-based-tools
Palettes | Flat UI Colors 280 handpicked colors ready for COPY & PASTE

オンライン上で手軽に様々な効果や設定を試し、導入することができるツールが40種類紹介されています。その中から幾つかおすすめのツールをピックアップしましたのでご覧ください。

詳しくは以下

40-free-web-based-tools3
Clippy — CSS clip-path maker
Clippyは画像を切り抜くフレームの形を自由に調整することができるWebツールです。星や丸などベースとなる図形を27種類の中から選ぶことが出来、自由に編集できます。
 
 
 
40-free-web-based-tools1
CSS Colour Gradients with GradPad, beautiful CSS color gradient generator for your designs
トレンドのグラデーションをCSSで表現できるWebツールです。背景にグラデーションを使いたいときなど、大きい面積でグラデーションを取り入れたいときに。
 
 
 
40-free-web-based-tools2
Trianglify.io · Low Poly Pattern Generator
流行のポリゴングラフィックをCSSで表現するためのツールです。目の細かさや角度、色味などをカスタマイズでき自由度も高いです。
 
 
最適なツールを利用することで、クオリティの高いコーディングを短時間で完結することができます。サイトには他にも活用する機会の多いWebツールが多数紹介されていますので、興味をお持ちになられた方は是非下記リンク先よりご覧になってみてください。

40 Free Web-Based Tools & Apps for Working With CSS

続きを読む
このエントリーをはてなブックマークに追加
2018年06月09日

UIデザインやWebデザインに役立つフリーのhtml UIキット「25 Fresh Free HTML UI Kits」

Webやアプリケーションのデザインに欠かせないUI設計。しかし使いやすく最適なUIデザインを一から考えるのは中々手間がかかるもの。今回ご紹介するのはそんなデザイナーの方におすすめしたい、最新のUIデザインキット「25 Fresh Free HTML UI Kits」です。

html0609
GitHub – ElemeFE/element: A Vue.js 2.0 UI Toolkit for Web

CSSやHTMLの知識が必要にはなりますが、使いやすく多彩なシーンで活躍できるUIデザインキット25種類が紹介されています。さらにその中から幾つかおすすめのUIキットをピックアップしてみましたのでご覧ください。

詳しくは以下
(さらに…)

続きを読む
posted 09:00  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2018年05月02日

手軽にデザインをカスタマイズできるWebサイトテンプレートまとめ「25 Free Open Source Website Templates for Easy Customization」

企業から個人まで、幅広い目的・用途で運用されるWebサイトは、インターネットを通して情報発信をする際に欠かせないツールのひとつ。しかし、初心者が一からコードを組みWebサイトを制作するとなると、完成までにコストがかかってしまいがちです。今回ご紹介するのは、そんな手軽に制作できるWebサイトテンプレートをまとめた「25 Free Open Source Website Templates for Easy Customization」です。

25-free-open-source1
25 Free Open Source Website Templates for Easy Customization
使いやすく、カスタマイズ可能なオープンソースのWebサイトテンプレートが25種類紹介されています。さらにその中から、これはと思ったものを幾つかピックアップしてみましたのでご覧ください。

詳しくは以下
(さらに…)

続きを読む
このエントリーをはてなブックマークに追加
2018年04月18日

Webデザインに役立つECサイトを想定したUIキット「M989 Website UI Kit」

ユーザーの動線やサイトの使いやすさに深く関わるUI設計。特にUIがユーザーのコンバージョンに直結するようなECサイトなどの場合、その設計は非常に重要な行程です。今回ご紹介するのは、そんなECサイトでのUI制作に役立つECサイトを想定したUIキット「M989 Website UI Kit」です。

m989-website-ui-kit1

シンプルながらもポピュラーな親しみやすさのあるUIデザインのキットです。

詳しくは以下
(さらに…)

続きを読む
posted 09:00  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2018年04月16日

プレゼンや資料作りに デザインを魅力的にみせてくれるハイクオリティなPSDモックアップ「Free PSD Mockup Templates (30 Presentation Mock-ups)」

制作したデザインをイメージに合成し、より良く見せてくれるモックアップ。プレゼンテーションや資料など、デザインの完成イメージを膨らせてアピールしたい時に有用な手段です。今回ご紹介するのは、そんなデザインに使えるハイクオリティなPSDモックアップをまとめた「Free PSD Mockup Templates (30 Presentation Mock-ups)」です。

free-psd-mockup-templates-30_1
Free PSD Mockup Templates (30 Presentation Mock-ups) | Freebies | Graphic Design Junction

雑誌や名刺などの印刷物から、カップなどのプロダクトまで幅広いモックアップが30種類まとめられています。その中から気に入ったモックアップを幾つかご紹介します。

詳しくは以下
(さらに…)

続きを読む
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2013年02月17日

様々なノリモノの形をベクターで描いたグラフィック素材「Free Vector Vehicles」

世界中に多種多様な種類があるノリモノ。車、バイク、船、飛行機など、パッと思い浮かべるだけでも数種類でてきます。それだけに、制作の中で、ノリモノを表現する機会もあると思います。今日紹介するのは、様々なノリモノの形をベクターで描いたグラフィック素材「Free Vector Vehicles」です。

上記のようにベクターデータで表現されており、シンプルなデザイン感なので、比較的利用しやすく、加工なども行いやすくなっております。

詳しくは以下

(さらに…)

続きを読む
posted 04:53  |  
Category: Design , vector   
2016年01月11日

wordpress構築に取り入れたいフリーテーマまとめ「20+ Free WordPress Themes to Start 2016」

さまざまなwebサイトで取り入れられているwordpress。フリーで使用できるテーマも多数配布されており、活用することでよりデザインや構築がスムーズになります。そんな中紹介するのが、wordpress構築に取り入れたいフリーテーマまとめ「20+ Free WordPress Themes to Start 2016」です。

wordpress0110_2
Cosimo – Blog & Portfolio WordPress Theme | CrestaProject

いろいろなレイアウトのwordpressテーマが紹介されており、どれも魅力的なものばかり。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: WordPress   
2016年02月21日

ヴィンテージ調のデザインフォントまとめ「30 Vintage Fonts Perfect for Retro Style Design」

デザインにレトロ感を演出したい時は、ヴィンテージテイストのフォントを取り入れることでより雰囲気を強く表現できると思います。そんな中今回紹介するのは、ヴィンテージ調のデザインフォントまとめ「30 Vintage Fonts Perfect for Retro Style Design」です。

font0221_1
Caslon Antique font by Alan Carr – FontSpace

ヴィンテージな質感のデザインフォントがまとめられています。中でも気になったものをピックアップしましたので、下記より御覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Font   
2017年03月19日

350以上ものアイコンが一度に!フリーベクターアイコンセット「Noupe Exclusive: 350+ Free Icons For Our Readers」

デザインに欠かせないアイコン。いろいろなテイストのアイコンを揃えておけば、いざという時便利なのはわかっているけれど面倒で…という方におすすめなのが、今回ご紹介するまとめ「Noupe Exclusive: 350+ Free Icons For Our Readers」です。

1

なんと350点以上ものベクターフリーアイコンのaiデータが一括でダウンロードできる優れもの。テイストもシンプルベースなので使いやすいタイプのアイコンとなっています。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design , vector   
2011年11月21日

250種類以上のアイコンが一括ダウンロードできる「Free Icon Set For Web Designers: Aroma (250+ PNG Icons)」

webサイト制作の必須アイテムとなっているアイコンは、フリーで公開されている作品も多いですが、テイストを合わせたアイコンを自分でそろえる必要があります。そんな中今回は、250種類以上のアイコンをセットにした「Free Icon Set For Web Designers: Aroma (250+ PNG Icons)」を紹介したいと思います。

web制作に利用しやすいアイコンが豊富に展開された、webデザイナーに嬉しいセットとなっています。

詳しくは以下

(さらに…)

続きを読む
2014年12月11日

三角形をグラフィックモチーフとしてデザインできるフリーPhotoshopブラシまとめ「A Designer’s Collection Of Free Triangle Brushes For Photoshop」

個性的なデザイン演出のために、さまざまなグラフィック表現を駆使してデザインをすることも多いかと思います。そんな時に活用したい、三角形をグラフィックモチーフとしてデザインできるフリーPhotoshopブラシまとめ「A Designer’s Collection Of Free Triangle Brushes For Photoshop」を紹介したいと思います。

triangle1
Triangle – Brushes. by osukatutoriales on DeviantArt

三角形をモチーフとして利用したPhotoshopブラシの、いろいろな種類がまとめられています。

詳しくは以下

(さらに…)

続きを読む
posted 01:48  |  
Category: Photoshop   
2009年12月11日

ビンテージ感を演出するフリーphotoshopブラシ50「50+ Free Vintage Photoshop Brush Sets to Download」

かすれた文字、あせた写真など、鮮やかや鮮明でないものも時にはデザインを魅力的にしてくれます。今回紹介するのはデザインに風合いや質感を与えたい時に便利なビンテージ感を演出するフリーphotoshopブラシ50「50+ Free Vintage Photoshop Brush Sets to Download」です。

psvintage01
Vintage Grunge Brushes

かすれた文字、ラベル、グランジの効いた紙などなど様々なビンテージを感じさせてくれるphotoshopブラシが集められています。今回はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 10:23  |  
Category: Design , Photoshop   
2017年07月23日

デベロッパーとデザイナーのための最新リソースまとめ「10 Fresh Resources For Designers」

デベロッパー、デザイナーであれば常に最新の素材を所持しておきたいもの。ですが、膨大にある素材の中で探し出すことは非常に大変。今回はそんな最新のリソースがまとめられた「10 Fresh Resources For Designers」をご紹介していきたいと思います。

designresource_top
30 Adventurous Space To Earth Icons [Freebie] – Smashing Magazine

アイコンからモックアップまで色々な種類がまとめられています。いくつかピックアップしていますので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: Photoshop , WebDesign   
2014年08月21日

最新のクリエイティブなフリーフォントが集結「Fresh and Free Fonts for August 2014」

日々新しくどんどんと公開されているフリーフォント。シンプルなものから、デザイントレンドに合わせたクリエイティブ性の高いものまで、さまざまな種類が存在しています。そんな中今回は、最新のクリエイティブなフリーフォントが集結した「Fresh and Free Fonts for August 2014」を紹介したいと思います。

font140821_1
Opificio Neue Font | dafont.com

定番として利用できるタイプから、フォントを主役にしたデザインを作りたい時におすすめな個性的なものまで、さまざまな種類が紹介されています。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Font   
2008年05月29日

ユーザーのソーシャルサイトを自動判別してアイコン表示する「SocialHistory.js」

最近はソーシャルサイトも増えてきて国内でもかなりの数のサービスが存在します。ソーシャルブックマークサービスを簡単に利用できるように、ソーシャルサイト用のアイコンを並べているブログも当ブログを含めて多いかと思います。

しかし上記のようにあまりにも並びすぎているとあまりにも不格好です。そこで今回紹介するjavascript「SocialHistory.js」はユーザーが利用しているソーシャルサイトを自動的に検出して、必要と思われるアイコンだけ表示させることができるスクリプトです。

詳しくは以下

(さらに…)

続きを読む
posted 07:54  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る