タグ

WEB制作に関するumikamiのブックマーク (167)

  • びっくりするほど簡単!HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール

    さくっと短時間で、慣れれば1分! デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ

    びっくりするほど簡単!HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール
  • 無料でアクセス解析の基本と応用をマスターできるGoogle公式講座&資格「Google アナリティクス個人認定資格(GAIQ)理解度テスト」に挑戦してみた

    Google アナリティクスをただなんとなく見て使うだけだと「一体どうすれば数が増えるのか?成果をアップできるのか?」という部分がわからず、まさに宝の持ち腐れ。かといって多数出ている「Google アナリティクスの使い方解説」みたいなものも、どれがいいのかをそもそも判断できないので、お金を払ってどれを買うべきかが意味不明。Google アナリティクスがあまりにも高機能&多機能であるがゆえに、まったく使いこなしている自信がゼロ……という場合に、まずその取っかかりとしてわかりやすいのが、Googleが提供する無料の認定資格「Google アナリティクス個人認定資格(GAIQ)」です。 Academy for Ads: Google アナリティクス個人認定資格(GAIQ) https://academy.exceedlms.com/student/path/2949 「Google アナリティ

    無料でアクセス解析の基本と応用をマスターできるGoogle公式講座&資格「Google アナリティクス個人認定資格(GAIQ)理解度テスト」に挑戦してみた
  • ブログ月収100万円をこえて分かったこと - やぎろぐ

    2016 - 04 - 01 ブログ月収100万円をこえて分かったこと ブログ-ブログノウハウ ブログ ブログ運営報告 SPONSORED LINK 人気記事 ・ 家計簿をつけていない人はマネーフォワードの自動振り分けを体感すべき! ・ 怖いほど当たる強み診断「ストレングスファインダー」をやれ! ・ スキルはお金に簡単に変えられますよ!BASEを使えばね。 ・ ぼくの年収は564万円!新卒平均初任給の2倍以上だあ おすすめ記事セレクション 1. 【検証】渋谷ハチ公前でフリービンタをすると愛は生まれるのか 2. 大学生3人が相席屋でワンチャン狙ってウェイウェイしてきた話 3. 43歳のおっさんのナンパに2時間付き合ったら友情が芽生えた話 4. くそダサい大学生のメンズファッションランキングTOP5 list Tweet お金大好き、女の子大好き八木仁平です。 先日、早稲田大学を卒業してフリ

    ブログ月収100万円をこえて分かったこと - やぎろぐ
  • 3割の力で作って、新聞やテレビで紹介され、生活費くらいのお金が入るネタサイトの作り方【連載:村上福之】 - エンジニアtype | 転職type

    DB設計のメモ。ネタサイトのレベルであれば、これくらいで問題がないと思う ネタサイトの作り方その2: コードをもりもり書く。なるべくPHPで ある程度設計が固まったら、ブラウザでCloud9を起動して、いきなりコードをもりもり書きます。 サーバの言語はPHPが多いです。運良くヒットした時、日の大きな会社にサービスを売却するのに便利なのはPHPだからです。 Cloud9は素晴らしいです。感動します。無料でいきなりクラウド上のオンラインIDEとサーバを用意してくれます。ApacheとMySQLRubyPHPとGitくらいは普通に入っています。 昔は、オンラインIDEは遅くてダメなものが多かったのですが、Cloud9だけは別格です。テキストエディタすら立ち上げません。3割くらいの力でネタサービスを作るには最強の環境です。 オンラインIDEでは珍しく、ターミナルも叩けますので、普通にGit

    3割の力で作って、新聞やテレビで紹介され、生活費くらいのお金が入るネタサイトの作り方【連載:村上福之】 - エンジニアtype | 転職type
  • Web屋が使う34個の「シンプル・簡単・便利」なウェブツールまとめ

    作成:2012/10/29 更新:2016/10/22 Tool > 低スペックPCやウィンドウ幅の狭いノートを使っている場合、ソフト立ち上げを躊躇してしまう時がありませんか?そんな人に「シンプル、軽い、簡単」のウェブ上で使えるツールをご紹介。ブラウザ内で開けるので無駄なスペースを取られません。 ※こちらの記事は2012年に書いたもので、情報が古くなっております。比較的最近のツール系のまとめは、Web制作に役立つトレンドのツール一覧と以下の2つご覧ください。(※ 2015/06/25 2015/06/28追記) Node.jsとgulpをインストールして使うまでの入門記事 これからGit を始めてみようという人のための使い方と入門フロー 特にウェブ屋さんやブロガーさん達が使っているのをピックアップ。 もちろん僕も頻繁にガシガシ使ってるので「ツール用ブックマーク」としてこのページを作りました

    Web屋が使う34個の「シンプル・簡単・便利」なウェブツールまとめ
  • Webデザイナーが初めてECサイト(事業)をゼロから立ち上げたので流れをひと通りまとめてみた - WebデザイナーUnificブログ

    昨年2014年は、とある事業主のEC事業の立ち上げに携わりました@unificatです。 法人設立・EC Cube構築・配送業者・決済代行業者・etc...初めてやる事を手探りで色々やりました。まぁ「全部やりました」と言っても過言ではないかと思うくらい色々やりました。 他にも商品の仕入れとかもありますが、記事ではオンライン上で物販をおこなうEコマースの立ち上げについて触れてみたいと思います。 ちなみに技術に関するネタは全然ないので、技術的な内容を期待した人はごめんなさい。 1.サーバの選定・準備 サーバはレンタルサーバの中で探しました。リリースしてもまだ小規模なので、トラフィックが増えたり、複雑な事をし始めたらVPSや専用サーバを検討すればいいかなと思いました。 なによりWebデザイナーという立場でサーバ周りまで手を出すと、正直リリースまで時間が掛かりそうだと感じたからです。 選定の結果

    Webデザイナーが初めてECサイト(事業)をゼロから立ち上げたので流れをひと通りまとめてみた - WebデザイナーUnificブログ
  • なんでCSSすぐ死んでしまうん

    The document discusses schema design patterns for MongoDB databases. It introduces common patterns like attributes, subset, computed, and approximation. Attributes store optional fields as field-value pairs to index them easily. Subset duplicates a small subset of dependent documents to reduce working set size. Computed pre-calculates values to avoid repeated computations. Approximation uses fewer

    なんでCSSすぐ死んでしまうん
  • 「もはや計画は不要になった」 MITメディアラボ・伊藤穰一氏が語る、"インターネット後の世界"と"新しい原理" - ログミー[o_O]

    「もはや計画は不要になった」 MITメディアラボ・伊藤穰一氏が語る、"インターネット後の世界"と"新しい原理" 革新的なことをしたいなら「ナウイスト」になろう #1/2 マサチューセッツ工科大学(MIT)のメディアラボ所長に日人として初めて就任し、またNYタイムズ、ソニーなど多くの一流企業で取締役を務めるなど実業家、投資家としての一面も持ち合わせる伊藤穰一氏。そんな氏が考えるイノベーションの新しい原理を、世界各地で起こっている実例とともに紹介しました。(TED2014 より) 素人集団による放射線量公開プロジェクトを成功に導いた、新しい原理 伊藤穰一氏(以下、伊藤):2011年3月10日。私はケンブリッジのMITメディアラボで、学部生やスタッフと、私が次期代表にふさわしいか議論していました。その夜。マグニチュード9の地震が日の太平洋沖を襲いました。 そのニュースを見た瞬間、私はパニック

    「もはや計画は不要になった」 MITメディアラボ・伊藤穰一氏が語る、"インターネット後の世界"と"新しい原理" - ログミー[o_O]
  • ウェブデザインをはじめるあなたへ - ウェブ雑記

    ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。+いくつかの自分で作った資料 SlideShare 色彩センスのいらない配色講座 色相、明度、彩度で色を説明できるようになる。 ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。 その上で、あまり間違いのない色の選び方がわかるようになる。 ノンデザイナーのための配色理論 最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。 ウェブサービスの企画とデザイン 僭越ながら明治学院大学で講義した時に作った資料。 なんとなくウェブサービスを作るときの流れとか感じてもらえたら幸いです。 かんたんキレイなウェブデザイン 僭越ながら勉強会 (UT Startup Gym) 用に作った資料。 なんとなく CSS フレームワーク、グリッドシステム、レスポンシブデザイン、ウ

    ウェブデザインをはじめるあなたへ - ウェブ雑記
  • 16個の業種別で学ぶ「ホームページデザイン」の王道パターン | LISKUL

    ホームページのデザインっていろいろあって、どれが自分のビジネスにふさわしいものか迷ったことはありませんか? 個人で事業をやっている方だと、そのような疑問を持つ方も多いのではないでしょうか。 でも実は、業種ごとの王道デザインを知っていれば悩む必要なんて何もないのです。 今回は、全16業種にわたる王道のホームページデザインをお伝えしたいと思います。 外注を活用したホームページデザインの業務切り出しフロー 1. 美容院のホームページデザイン【王道】 おしゃれな髪型の女性の大きめな写真を載せるデザイン 【実例】 Nine9 / ナイン MerryLand 美容室 pukka hair 美容院のホームページデザイン ポイント「おしゃれな髪型をしている女性の写真を載せる」 美容院のホームページの王道デザインは、お店のロゴが左上、メニューがその横にあり、その下には、おしゃれな髪形をしている女性の大き目な

    16個の業種別で学ぶ「ホームページデザイン」の王道パターン | LISKUL
  • Adobe製品の代わりに使える無料アプリ10+

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

    Adobe製品の代わりに使える無料アプリ10+
  • WEBプログラマの私が開発現場で学んだSEOを一挙公開! - 文系プログラマによるTIPSブログ

    2014-05-22 WEBプログラマの私が開発現場で学んだSEOを一挙公開! SEO 誰もが悩むSEOですが、私が沢山のWEBサイトを開発してきた中で、これさえ対応すればSEOは問題無いよ!というものをまとめたので、公開してみようと思います。SEOは Search Engine Optimize の略で、言葉通り検索エンジンに対する最適化です。決してユーザビリティの向上等、ユーザへの施策では無い事を理解しましょう。(プログラマーなら)最低限SEOをやっておくべきであり、その後にマーケティングやユーザビリティ向上を目指しましょう。 では早速見ていきます。 ちょっと長いですが、頑張っていきましょう!! ■ htmlタグ titleタグ 対応しないとどうなるか titleタグが無い場合や「無題ドキュメント」等となっている場合、検索エンジンが頑張って自動的にタイトルを表示してくれます。すると

    WEBプログラマの私が開発現場で学んだSEOを一挙公開! - 文系プログラマによるTIPSブログ
  • 見ないと損する便利なデザイナー向けWebサービス13選 | SONICMOOV LAB

    こんにちは。 緑のにおいが気持ち良い季節になってきましたね。3月4月は花粉で涙をボロボロ流しながら生活していたのですが、やっと思う存分散歩ができそうです。 さっそくですが、デザイナー・クリエイターのみなさんは、自分の作品やスキルをアピールするために普段どのようなツールを使っているでしょうか? 現在さまざまなWebサービスが出ており、うまく利用できれば活動や交流の幅が広がるはず! そう思って今回はクリエイター向けのサービスをいくつかまとめました。 目次 UIアニメーションのヒントに ちょっとしたアニメーションを作るときに参考にしています。動きを眺めるだけでも面白く、インスピレーションがわきます。 CAPPTIVATE.co iPhoneアプリUIアニメーションをカテゴリ別に紹介しています。マウスオンでアニメーションが確認でき、アプリのデザインやUIアニメーションなど、アプリ開発に大変役立ち

    見ないと損する便利なデザイナー向けWebサービス13選 | SONICMOOV LAB
  • HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版

    HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版

    HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版
  • Webデザイナーに愛を込めて。ディレクターが意識すべき7つのポイント | LPO研究所

    LPO研究所所長の鎌田です。 先日、弊社デザイナーが「新人Webデザイナーにありがちな5つのコミュニケーショントラブルとその解消法」という記事を書きました。 この記事は公開2日で1万人以上もの方にお読みいただきまして、当にありがたい限りなのですが、そのなかで 「指示を出すディレクターにも問題があるのでは?」 というご意見を同時に多数いただきました。 皆さんの仰るとおりでして、「売れるWebデザイン」というのは、デザイナーとディレクターの真剣勝負によってのみ生まれます。どちらか一方が依存している状態、考えていない状態では、ターゲットの心を掴むデザインを作ることはできません。 では、「売れるデザイン」をWebデザイナーに作ってもらうために、ディレクターは具体的にどう動けば良いのでしょうか? 実はデザインディレクションにも、誰でもカンタンにマネできる「ちょっとしたコツ」があります。 今回は「デ

    Webデザイナーに愛を込めて。ディレクターが意識すべき7つのポイント | LPO研究所
  • スキルが増えた!今後を生き抜くためにWebデザイナーも習得しておきたい技術

    作成:2014/03/17 更新:2014/11/01 Webデザイン > クライアントさんの依頼やクラウドソーシングでもライティングや撮影依頼の需要が増えてきました。コンテンツファーストの時代になり、ライターだけじゃなく「コンテンツを作れる」デザイナーやエンジニアは、今後100%重宝されます。今回はフリーでも活躍できるように、ライバルのデザイナーさんと差別化できるように「コンテンツ作成」もできるデザイナーになるためのスキルをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コンテンツ設計 1.イラスト作成のスキル 2.写真の撮影技術と知識 3.動画編集の技術 4.コピーライティング 5.モーショングラフィック 6.電子書籍の作成 Webデザイナーの基知識とスキル 7.UXUI・IAの知識 8.レイアウト基原則 9.配色+色彩計画 10.フ

    スキルが増えた!今後を生き抜くためにWebデザイナーも習得しておきたい技術
  • レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG

    どうも〜こんにちはぁ! 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね!」って感じた基的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ

    レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
  • ひとりでWeb制作できた!Webデザインの勉強にもなる独学「スライド」総まとめ

    作成:2014/02/24 更新:2016/06/30 Webデザイン > デザインの流れや基的なフローなどを勉強しておくだけでも効率が良くなるし、起業の際にも役に立つと思います。デザイナーさんにもっとデザイン力を上げたいと言われたのもあり、今回は制作フローとデザインやその他の知識を学べるように、出来るだけ制作フローにそって、スライドをまとめました。膨大な量になったので簡潔にしています。全てスライドです。 エンジニア速報は Twitter の@commteで配信しています。

    ひとりでWeb制作できた!Webデザインの勉強にもなる独学「スライド」総まとめ
  • Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ

    TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション/受注前 1.書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類(ヒアリングシート/企画書/提案書/業務委託書/見積書/契約書)など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ23 2.見積もりの目安と計算方法 例えば項目を作るとき1.項目/2.内容/3.設計(人日)/4.製造(人

    Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
  • 2013年チェックしておきたいスタイルシートやスクリプトのスゴ技たち -Top Pens of 2013

    当ブログでもお馴染みのCodePenから、スタイルシートやスクリプトを使って実装された2013年にもっとも人気のあったスゴイデモを紹介します。 Top Pens of 2013 Top Pens of 2013はベスト100が掲載されており、どれも見応え十分のワクワクするクリエイティブな作品ばかりですが、その中からトップ10を紹介します。