background preloader

気に入ったサイト

Facebook Twitter

簡単に今すぐできる!WEB制作を「はじめて」する人が分かるまとめ. ひとりでWeb制作できた!「知識0から学ぶ」すごいスライドやサイト27. 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。 Wordしか分からない。」 と言われました。 とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「0」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。 もくじ ページを作る1.HTML52.CSS3.Sass 動きを出す(クライアントサイドスクリプト)4.JavaScript5.jQuery ユーザーにアクションを起こさせる(サーバサイドスクリプト)6.php7.Python8.Ruby バージョン管理システム9.git アプリ開発10.ハイブリッドアプリ11.ネイティブアプリ サーバー12.MySQL13.Apache14.nginx デザイン15.フォント16.タイポグラフィ17.配色18.カンプ Adobe系19.Photoshop20.Illustrator21.Dreamweaverコンテンツ22.ライティング 保守23.Google Analytics24.AdWords25.SEO26.Webmaster27.SSH ページを作る まずは、文字や画像をページに表示するところから。 Htmlがなんとなく分かったら、次はページのデザインです。 Sass CSSに慣れてきたら、CSSを効率的にクールに書けるSass(サス)。 クライアントサイドスクリプト JavaScript HTMLとCSSが書けるようになったら、javascriptやjQueryを勉強してみましょう。

jQuery jQuery は Javascript のライブラリのひとつです。 サーバサイドスクリプト php PHPでは見る側がデータを送信したり、選んだり「見る側が何らかのアクションを起こせる」ようにできます。 Python Googleで利用されていることで有名、海外で人気のPython。 Ruby プログラムを楽しむ言語と述べた「まつもと ゆきひろ」氏が開発しているフリーソフトウェア。 Ruby初級入門 バージョン管理システム git 何故かスルーされやすいGit。 アプリ開発 ハイブリッドアプリ HTML5でアプリ開発。 サーバー 配色. 短期間でJavaScriptを習得し、アプリ・Webサービスをつくるための勉強法 | らふらく^^ Learn web development in 12 Weeks | Bloc.

So you want to be a programmer, huh? Here are 27 ways to learn online. Whether you are looking to switch careers and become a full-time programmer, want to try to build a website or app on the side, or are just looking to round out your skill set, learning to code has certainly been something a lot of people have started to do lately. And while being a programmer might not be for everyone, there is a lot to be said about gaining a better, more educated view of how all those pixels get moved around all those screens. Before we delve into our list of learning resources sites, we wanted to share some advice from Marissa Louie, a self-taught product designer for Ness Computing.

A former startup founder, Louie told TNW that the hardest part of being self-taught – whether it’s design, programming, or any other discipline is, “gathering the courage. The most important barrier is just to overcome your fears” (she also said having the ability to follow instructions helps as well). F**k it, we'll do it live! 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. Learn How to Make Websites. Learn Ruby with the Neo Ruby Koans. Webflow - Design Responsive Websites Visually. 2分で開業. 50 Awesome Twitter Bootstrap Templates. Advertisement In designing websites today, one of the must have frameworks is the twitter bootstrap. To those who do not have an exact idea about the benefit of this framework, but are familiar with the social media account – twitter, it has nothing to do with the boot laces.

It usually contains non-responsive and responsive grid layouts, JavaScript, components, and base CSS. It allows development of website in a quick and easy manner since this is a collected elements of CSS and JavaScript. Included here is Grid system which is made in placing content on the site while CSS is for scaffolding. In fact, some of the novice users of these twitter bootstrap templates affirmed that you could experiment and test them to see exactly if there are issues or concerns that might manifest along the way.

Free Bootbusiness Features Twitter Bootstrap version: 2.1.1HTML5 & CSS3 with ResponsiveSlider in Home pageLightbox in Portfolio page Free Responsive HTML Template Andia Readable (Free) OHMY! Mobile User Interface Patterns. Important: If you like what we do, please consider supporting our site with a donation. pttrns NYT Now Timeline GUCCI STYLE Timeline Path Timeline Behance Timeline Vine - Make a scene Timeline Quora Timeline Showyou Timeline Highlight - People Nearby Timeline Heyday - Journaling. Jukely – Concerts with... EPIC™ Timeline Krush Mobile Timeline Frontback Timeline Redd - reddit client Timeline Foursquare - Find Rest... Ultravisual Timeline Prev 1 2 3 4 5 Next.

UI-Patterns.com. ソシオメディア | 展開. Classeur : Design Patterns. Mobile Patterns. ノンデザイナーこそ押さえておきたい! UI/UXが学べる神スライド7選. 競合に負けないWebサービスをつくるため、UI(User Interface)、UX(UserExperience、ユーザー体験)にこだわるのは、もはや常識。 良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。 エンジニアやWebディレクターも学んで損はしません。 もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです! 目次基礎知識 1.UXのためのUIデザイン 2.UX is not UI 3.ククパド美ちゃんと学ぶ! クックパッドのUI改善プロセス:前編応用編(Webサイト) 4.ククパド美ちゃんと学ぶ! 1.UXのためのUIデザイン UIとUXの関係性について解説したスライドです。 このスライドの要約 ・UIが素晴らしくてもUXがダメな場合もある ・ユーザーがどんなアクションをするか優先順位を付けようUXのためのUIデザイン 2.UX is not UI! 「そもそもUI/UXとは何か?」 スライドによると、UIはUXの一部でしかないそうです。 このスライドの要約 ・UI……サービスに触れるときに役立つもの(理性、規則性) ・UX……サービスを使うときにユーザがどう感じるか(感性) ・UIはUXの一部UX is not UI!

3.ククパド美ちゃんと学ぶ! クックパッドでUIを担当されている@monja415さんのスライドです。 このスライドの要約 ・良いUIとは、ユーザの目的を達成できるUIのこと ・2秒でわかるUIを意識し、Topページのテキストは「8〜13文字」に収めるククパド美ちゃんと学ぶ! 4.ククパド美ちゃんと学ぶ! 後編もぜひ見ておきたいところ。 このスライドの要約 ・UIにもパターンがある。 5.コンテンツで改善する UI デザインの極意 @yahassyさんのスライドです。 このスライドの要約 ・無限スクロールを使わないほうが良い場合もある(ターゲットが重要) ・コンテンツのないデザインはただの装飾 ・絵よりも言葉のほうが明確(ユーザーが迷わない)な場合もあるコンテンツで改善する UI デザインの極意 6.UI&UX / 重要なのは、毎日さわって嬉しいUI UX! こちらのスライドではスマホアプリのUIについて解説しています。 7.ニコニコ超デザイン-Metro考察編- 元ドワンゴのデザイナー、@VoQnさんのスライドです。 まとめ いかがでしたか? ウェブページやスマフォアプリの制作時に参考にしたいUIエレメントをコレクションしているサイトのまとめ. ユーザーが目的を達成するために手助けをする、機能的で、直感的で、美しいインターフェイスを備えることは非常に重要です。 最近のウェブサイトやスマフォアプリなどでは、アニメーションを伴ったインターフェイスも増えてきました。 アニメーションを伴った楽しいUI、ディテールにこだわったUIなどをコレクションしているサイトを紹介します。 アニメーションを伴ったUIを6秒ほどの動画にしてコレクションしています。 Dribbbleで掲載されているアニメーションのGUIをコレクションしています。 UI Animations ソフトウェア、スマフォアプリを中心としたUIのアニメーションをコレクションしています。 UIDetails ディテールにこだわったUIをコレクションしています。 Awesome UI かっこいいUIをTumblrでコレクションしています。 Little Big Details よく見るUIの気づかないような細部の大きなこだわりをコレクションしています。 Got Wood? UI Design Elements.

This set of web and user interface design elements has been hand-crafted just for MediaLoot, it contains many of the common web and app design elements you need to craft a beautiful user experience. And as you have probably guessed, this set has a wooden theme so expect to find plenty of wood buttons, wood switches, wood tabs, wood sliders, wood checkboxes, wood… well, you get the picture!

Each element is created using vector shapes and just 1 seamless texture, so everything is scalable and suitable for multiple uses, from iPhone and iPad apps to websites or desktop applications. Free License Feel free to download and use this item for both personal and commercial projects with attribution back to MediaLoot.

Please note: Attribution is required for free items. More from User Interface » Design Elements. The Responsinator. SeyDoggy/rFrame. [JS]面倒なスマフォ・タブレットでの異なるビューポートサイズの確認が簡単にできるスクリプト -rFrame. 制作した(制作中)のウェブページをiPhone, Android, iPad, Kindleなどスマフォやタブレットのビューポートのサイズでエミュレートして表示するレスポンシブ対応サイト制作時に役立つjQueryのプラグインを紹介します。 rFrame -GitHub rFrameのデモ まずは、下記のようなデスクトップ用のページがあるとします。 デモでは、これをスマフォ・タブレットのサイズにエミュレートして表示します。 通常時:デスクトップサイズ デモページにアクセスすると、デフォルトでiPhoneサイズの表示になります。 デモページ:iPhoneサイズで表示 上部のバーで、デバイスの切替ができます。 Androidサイズで表示してみます。

デモページ:Androidサイズで表示 スマフォだけでなく、タブレットも用意されています。 デモページ:iPadサイズで表示 Kindleも用意されています。 デモページ:Kindleサイズで表示 デバイスの種類やサイズは、スクリプトに手を加えることで変更したり増やすことができます。 rFrameの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを</body>の上に記述します。 Step 2: スクリプトの実行 ブラウザでページを開き、コンソールに次のテキストを入力します。 セレクトメニューが表示されるので、デバイスやオリエンテーションを選択します。 デバイスを予め指定する場合は、下記のように入力します。

コンソールではなく、スクリプトを記述して実行することもできます。 オプション オプションで背景やツールバーのカラー、デフォルトのデバイスやオリエンテーションを設定できます。 美しいWebデザインをタイプ別に!見ないと損する目的別厳選Web見本サイトのまとめ. 中型ライダー(二輪)免許を持っているライターの内藤です。 本日は、ライダーキック並みの強烈さで役に立つ見本サイトをまとめてみたいと思います。 Web屋さんはご存じの方も多いかもしれませんが、ブログをしている一般の方、Webデザイン・DTPに興味のある方、お店をしている方なども必見です! 目次 部品に特化した見本 見出しデザイン(h1,h2,h3・・・その他DTPでも) 見出しデザイン.com 見出しタグ(h1,h2,h3・・・)のデザインの見本ですが、DTPなどでもヒントになるものがたくさんあります。 見出しメーカー 見本・・・ではありませんが、簡単にCSS見出しが作れるサイトです。 Ultimate CSS Gradient Generator こちらもCSS見出しを手軽に作れるサイトです。 フッターデザイン フッターデザイン.com こちらは、けっこう悩ましいフッターだけを集めた見本サイト。 ファビコン(Favicon) ファビコンギャラリー.com タブブラウザが普及して久しくなりました。

Favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。 そうです、タブに表示されるページタイトルの左側にあるアイコンのことです。 Favicon Generator こちらのサイトは、画像からファビコンを作成するジェネレータ・手描きでファビコンを作れるエディタ・ここで作られたファビコンを閲覧できるギャラリーがセットになったサイトです。 部品ごとに検索できる見本サイト Croppy(クロッピィ) なんと、ヘッダー・ロゴ・グローバルナビ・イメージ・見出し・バナー・サイドバー・ボタン・フッターと、殆どの部品見本を検索できます。 ブブンデザインアーカイブ 最後に. スマホサイト制作センスをアップする!見本・素材・WPテーマ・JS・その他全部丸ごとまとめ. こんにちは、ライターの内藤です! 前回の記事(美しいWebデザインをタイプ別に! 見ないと損する目的別厳選Web見本サイトのまとめ)ではWebデザインのタイプ別にわけた見本サイトのまとめを行いました。 今回はその続編として、スマホ・タブレット最適化サイトのデザインまとめをご紹介致します。 目次 ※もちろん順番に読む必要はありません。 スマホ専門デザイン見本 iPhoneサイトデザイン集のiPhoneデザインアーカイブ 登録数が半端ないです。

iPhoneデザインボックス 登録数の多さもさることながら、カテゴライズが色や業種のみならず、「かわいい」や「イラスト・キャラクター」・「和風」などがあって面白いです。 スマートフォンサイト集めました。 業種別・色別にカテゴライズされているので便利です。 iShowcase 登録数はやや少なめながら、これから育っていきそうな見本サイト。 部品別に見られるサイト Pttrns ヘッダ・フッタなどというカテゴライズではないのですが、リスト・検索・タブバーなどの部分ごとにカテゴライズされていますので、かなり参考になります。 こちらは若干スマホ「アプリ」系の部品の見せ方サイトのようですが、マップの見せ方やリストの見せ方が参考になりそうです。 その他スマホサイトの部品作りの参考になるサイト 部品別にまとめてあるページです。 スマホサイト素材になるキット Minimize UI Kit 今年の大本命、フラットデザインなUIキット。 Touch50px UI Kit こちらもフラットデザイン。 Minimalist Dark Psd Web UI Set Black UI Kit Got Wood?