サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
skillhub.jp
Premiere Proで動画編集を行う際、エフェクトやテンプレートなどを使用することもよくあります。編集時間が大幅に短縮されて便利です。 問題は、エフェクトやテンプレートなどを探すのに時間がかかること。 プリセットやテンプレートのパック素材を購入してしまう手もありますが、結構お値段。。動画編集のお仕事を目指していても、最初は無料もしくはお手頃価格だと嬉しいですよね。 今回は、無料&商用利用可能な、Premiere Pro素材を提供しているサイト紹介します。 Premiere Proエフェクト&テンプレート素材サイト まずチェックしたい5つのPremiere Proエフェクト&テンプレート素材サイト 1.mixkit 2.Motion Array 3.MotionElements 4.Shutterstockブログ 5.Video Milkshake その他、無料で使えるPremiere
VScodeは今のままでも十分使いやすいですが、拡張機能を入れると更に使いやすくなります。言語別にご紹介しますので、気になる拡張機能があったら入れてみてくださいね!拡張機能の追加は、サイドバーに「EXTENSIONS」(左のアイコンの一番下)を表示させて検索してください。有効、推奨、無効になっている拡張機能も見れるので、定期的に整理しましょう。 基本設定・ビジュアル変更の拡張機能 HTMLの拡張機能 CSSの拡張機能 JavaScripの拡張機能 WordPressの拡張機能 (おまけ)ライティング・TODOリストの拡張機能 基本設定・ビジュアル変更の拡張機能 VSCodeの基本設定やビジュアルを変更する拡張機能をご紹介します。ちょっとした事ですが、見た目が変わるだけで作業のしやすさが変わります。拡張機能を使わないでテーマを変更したいだけでしたら、パレットコマンド(Mac : Cmd +
Photoshopマスターへの道 25の必須スキルと参考サイト 画像編集ソフトとしても、グラフィックツールとしても、多くのプロが愛用するPhotoshop。充実した機能と公式サイトのバックアップ(解説動画・画像の提供)はもちろんこと、様々な方がチュートリアルや素材を公開している点も魅力ですね。 Photoshopを使うのであればぜひ知っておいて欲しい機能をギュッと凝縮、仕事レベルに必要な機能スキルを25の項目として紹介します。 Photoshopの基礎知識 PhotoshopのUI Photophopレタッチ基本スキル Photoshopでの加工スキル 実践! お仕事スキルと手順 Photoshopの基礎知識 Photoshopとは Photoshopはadobe社が販売している画像編集アプリケーションソフトウェア。精度が高く高機能な写真編集機能はもちろんのこと、イラストやデザイン作成にも
Visual Studio Code(以下、VSCode)では、作業を効率化できるショートカットが多数用意されています。ここでは、VSCodeのよく使うショートカットキーをご紹介します。どのソフトでもいえる事ですが、ショートカットキーを覚えると作業効率が一気に上がりますので、ぜひ覚えて使ってみてくださいね!最後に一覧を用意していますので、一気に確認したい方はそちらもご参照ください。 基本操作 コーディング 文字の置き換え、検索 指定の場所へカーソルを移動 選択(複数選択・矩形選択) 基本ショートカット一覧 基本操作 まずは基本操作に関するショートカットをご紹介します。コーディングをしていると、タブの移動、ファイルの移動などが頻繁に行われます。基本操作のショートカットを覚えるだけでも、作業がかなりはかどりますよ。 ファイルを開く Mac : Cmd + O、Win : Ctrl + O 新し
Bootstrapを使用するとPCやスマホなど使用する機器に左右されず整ったWebページを作ることができます。 Bootstrapテンプレートの中身 グリッドシステム ブレークポイント レイアウトの為のCSS row col(カラム) 使い方 まとめ Bootstrapの中身ってどうなっているの? Bootstrapでは、ボタンやメニューなど様々なパーツがあらかじめ用意されています。 それはつまり、HTML/CSS/JavaScriptファイルまたはコードのことです。Bootstrapが用意してくれているクラスなどを指定することで簡単にデザインを作成することができます。以下イメージ内では、ボタンが例として使われています。これも、ボタンの為のCSSが予め用意されているので、「btn-primary」というクラスの指定だけでボタンが作れるのです。 このようにBootstrapでは便利なデザイン
Visual Studio Code(以下VScode)はMicrosoftが開発した、無償かつ多機能、軽量で人気急上昇中のエディターです。初期状態から使える便利な機能が多く、カスタマイズをそこまでしなくても使いやすい上に、使える言語も数百種類とかなり多いので、これからプログラミングを勉強したい方にもぜひおススメなエディターです。 今回は、そんな素敵なエディターVScodeの使い方を、インストール、日本語化、Web制作にスポットを当ててご紹介します。 VScodeインストールの手順 VScodeの基本的な使い方 VScodeを日本語化 フォルダーの開き方、ファイルの作り方 VScodeの便利機能 VScodeでHTMLを書いてみよう VScodeでCSSを書いてみよう VScodeでJavaScriptを書いてみよう VScodeでWordPressを書いてみよう VScodeインストール
レスポンシブデザインという言葉を聞いたことはありますか? 普段皆さんはどのようにWebサイトを閲覧しているでしょうか。PCやスマートフォン、ipadなどのタブレットを使う方も増えていますよね。 移動中や、ちょっとした空き時間などであれば圧倒的にスマートフォンやタブレットを利用することが多いかと思います。そんなときにサイトの読み込みに時間がかかりすぎたり、画像の表示が上下でガタガタ…こんなサイトだとどんなに有益な情報が掲載されていても「見てみよう」という気持ちが急降下してしまいます。 レスポンシブデザインとは結局のところ、「何を使って見ても美しいデザインが保てる」ということなのです。 では一体どんなデザインがレスポンシブデザインとよばれるものなのでしょうか、まずは良質なお手本を見ていきましょう。 レスポンシブデザイン=美しい レスポンシブデザインを知りましょう 実はかんたんに作れる⁉レスポン
デザインの為のアプリケーションが数多くある中で、 Illustratorが支持されているのは充実した機能と公式サイトのバックアップ(解説動画や、画像の提供など)、後は何と言っても美しい画像や動画が簡単に作れるという点でしょう。 Illustratorを使うのであればぜひ知っておいて欲しい機能をギュッと凝縮しました。 それでは「Illustratormarマスターへの道 必須スキルと25の参考サイト」見ていきましょう! Illustratormarマスターへの道 必須スキルと25の参考サイト Illustratorの基礎 Illustratorで描く Illustratorで書く クリエイティブテクニック Illustratorと図形 Illustratorrとカラー 知らなきゃ損!illustratorの便利な機能 実践編 Illustratormarマスターへの道 必須スキルと25の参考
近い内にプログラミングをマスターする!そう思っている方も多いと思います。「やってみたけど、挫折してしまった。。。」「どこから手をつけていいのかわからない」など良く聞く話です。 ここでは、そんな方たちのために、プログラミングを短期間でマスターする方法をお話しようと思います。今からあげるトレーニングをだいたい1日3時間、2〜3ヶ月間続けることによって、基礎的なプログラミング技術をものにすることができます。 私自身はけっこう大人になってからプログラミングをはじめました。最初はなかなか理解することが難しかったのですが、これから紹介する「初心者プログラミングマスター7つのステップ」方法を実践したことで、けっこう良い感じでマスターすることができました。今ではこのサイトである「Skillhub [スキルハブ]」はもちろん複数のサイト(請負仕事で)のコードを書いています。 それでは、「7つのステップ」少し
Web制作の初心者にとってSEO対策ってどうすれば良いのかわからない人も多いのではないでしょうか。SEOの基本的なことが書いてあるページを見ても専門用語、横文字がばかりでわからない。それをまた検索してなんかしていると果てしない検索ループに陥ってしまいますよね。しかもSEOって事情がころころ変わっているし、何を信じてよいのかわからないという部分があると思います。 今回はわたくしスキルハブの吉田がそこらへんをできるだけ解りやすくステップ・バイ・ステップで説明したいと思います。Webサイトにどうやってユーザーを連れてくるか悩んでいる方、それがそもそもわからない方には必見です。この記事を見ながらじっさいにSEO対策を行ってみてください。それでは行きましょう! 目次 1. SEO対策の基礎を知る 2. SEO内部対策:Webサイトの構造を見直す 3. SEO内部対策:HTMLを改善する 4. 検索の
Windows10にRubyInstallerを使ってインストールします。これからのRails5を考えると、Rubyの2.2以上が必要なので、今回は最新バージョン(Ruby2.2.3)をインストールすることにします。 ■Railsインストール手順 1. Ruby Installerのインストール 2. DevKitのインストール 3. Gemのアップデート 4. SQLite3のインストール 5. nokogiriライブラリ 6. Bundler & Railsのインストール 7. Node.jsのインストール 1.Ruby Installerのインストール 現時点ではRubyの2.2.3が最新なので、以下からダウンロードしてインストールします。 http://rubyinstaller.org/downloads/ 「Rubyの実行ファイルへ環境変数PATHを設定する」を必ずチェックしま
ノンデザイナーのためのWebデザイン入門講座 やさしい動画で学ぶデザイン未経験者のためのWebデザイン入門です。誰でもこの4つの原則を知れば、ある程度見栄えのするデザインを実現することができます。
前回のRuby on Rails事例(海外有名サイト編)が好評だったので、今回は日本の有名サイト編もやってみたいと思います。日本でも特にスタートアップではRailsがけっこう使われてきてますねぇ。しかも上場している企業もあったりして。私もRubyとRailsが大好きなので、とても嬉しいです。 Cookpad http://cookpad.com 日本で代表的なRailsサイトと言ったらまずこのCookpadでしょう。社内文化としてもハッカー文化的な香りがして、とても良い感じですね。勉強会なども頻繁に開催されています。社内ブログも充実した内容になっています。 クックパッド開発者ブログ http://techlife.cookpad.com/ Gunosy http://gunosy.com Railsにより素早く開発し、成長して上場した企業と言えるでしょう。今は大量なトラフィックをさばく部分
だれかに「Webサービスで起業したいのだけど何を使ったらいいかな?」みたいな質問を受けたら「Railsだね」とぜったいに答えます。「ふーん」という感じなのですが、その時に「だってこんなサービスも使ってんだよ」と言うと「ああ、だったらすごいかも」ってな具合に納得してくれるんですよね。やっぱり事例っていうのは物凄い破壊力を持っているなと感じています。 そこで今回はRailsで作られたサイト。その中でも有名サイトをいくつかご紹介しようと思います。 今回はRuby on Rails事例の海外編 海外のスタートアップでRailsの需要はものすごくあります。私は去年サンフランシスコに行ってきて、Instacartというスタートアップにお伺いしてお話しを聞く機会があったのですが、その時に「いやぁ、このサンフランシスコではRailsエンジニアは本当に不足しているんだ。年収は日本円で1300万円くらい。でも
AARRRをパフォーマンス指標として活用する 500 Start-upの創業者で、エンジェル投資家であるDave McClureが唱えたAARRR指標を、グロースハックのパフォーマンス指標として活用してください。 Aqcuisition:ユーザーの獲得 ランディングページへの新規訪問数 Activation:ユーザーに自分のサービス素晴らしいと実感してもらうこと ランディングページのサインアップ率 ティーザーサイトで集めた先行サインアップユーザー数 Retention:一度、サービスを利用したユーザーがその後も、何度も戻ってきてくれること ユーザーの過去30日の再訪問率 ユーザーエンゲージメントアクション率 例:twitterの場合は30人フォローする率 dropboxの場合は1ファイルをアップロードした率 Referal:ユーザーはそのサービスが好きで、つい人に教えたくなる Viral係
Webサイトのデザインを習得するにはどうすればいいのでしょうか? 描画力や美的センスがないとデザインができない と思っている方も多いと思います。 しかし、 まず最初にご理解いただきたいことは +*デザインやレイアウトの根底にある原理原則を習得すれば、 良いデザインを作ることができる*+ という点です。 +*20%のキーポイントをマスターしたら、 80%の結果を出すことができる、*+ ということがテーマです 結果を出す為には、 すべてのスキルや知識を身につける必要はありません。 20%のスキルや知識でも、立派なサイトやサービスを 作ることができると思います。 デザインの原理原則をまとめましたので参照してください。 デザインの原則をマスターしよう Webデザインもデザインの一つであり、 デザインの原理原則が適用されます。 Webデザインを行う際に最も重要である5つの原則を紹介します。 ① グル
グロースハックとは何か グロースハックを制したものたち 1996年にHotmailの成功から始まったグロースハッカー、その後にグロースハッカーを引き継ぐことになったDropbox、グロースハックに市民権を与えたスタートアップのまとめ
Hotmail – グロースハッカー 創世記 グロースハッカーが一番最初に認識されたのはHotmaiがローンチした1996年になります。マイクロソフトに4億ドルで買収されたHotmailは、製品ローンチ18ヶ月後の1997年に1200万ユーザーを獲得しました。</br> 1996年当時、ブラウザ上で使うことできる世界初のフリーのメールサービスで、ハイテク業界の人達からは注目をあつめていました。しかし、30万ドルを調達したばかりのスタートアップであり広告やマーケティングに何百万ドルという予算はなく、認知度は低い状況でした。当時の成長戦略といえば、ラジオの広告枠を買ったり、高速道路沿いで人の目に写るBillboard(広告カンバン)の枠を買うことが主流でした。</br> 投資家の一人である Tim Draperが何万ドルをマーケティング費やす代わりに、Hotmailは全てのe-mailの一番下
“ユーザーエクスペリエンスデザイン(UXデザイン)って大事って聞くけどよくわからないなあ” というイメージを持っている方も多いかもしれません。 そんな苦手意識を持つ方にこのブログを用意しました。 このブログシリーズのテーマは +*20%のキーポイントをマスターしたら、 80%の結果を出すことができる!*+ ということです 結果を出す為にはすべてのスキルや知識を身につける必要はありません。 20%のスキルや知識でも、立派なサイトやサービスを 作ることができると思います。 良いユーザーエクスペリエンスを構築する為の20%の スキル・知識について紹介したいと思います。 UXデザインとは? ユーザー・エクスペリエンスを一言で表現すると ”ある製品やサービスを利用したり消費した時に得られる体験の総体のこと” です。 出展:IT用語辞典 e-Words ここでいう体験とは「楽しさ・心地よさといったプラ
メリハリが全てを決める 世の中に何百万と存在するWebサイトの中であなたが作るサイトは突出していますか? デザインが優れていることや、唯一無二のサービスを提供しているか?ということではありません。 ユーザーが訪問した最初の10秒で注意を得て、次のアクション(Call-to-Action)につなげていることができていますか? サービスやサイトをグロースハックするには、その入口のランディングページや、トップページで、あなたのサイトやサービスの価値を突出させるための演出をしなければなりません。 今回は、突出するための必須テクニックを紹介します。 Picture worthies thousands words(百聞は一見にしかず) Hiriseというスタートアップは最初、テキストのみで、サイトのランディングページを作っていました。パフォーマンスが思ったより伸ばすことができず、思い切って女性の写真
あなたがサイトを作った時に、どのようなページを作りたいでしょうか?苦労して調達した商品や、一生懸命作り上げたサービスを載せて訪問者にアピールしたいかもしれません。サービスや商品に思い入れが強い場、トップページやランディングページに特徴や機能説などを明付け足したくなってしまいます。 しかし、残念ながら、”グロースハック実践編 ランディングページ” でも紹介したとおり、情報が多いとユーザーは、一目見て、このサイトの価値が何であるか理解できずにユーザーの混乱を招き、結果離脱率を上げてしまいます。 2000年に行われた有名な心理学の実験で、24種類のジャムと6種類のジャムでどちらがより多く購買したかを検証した実験がありました。24種類のフレーバーの場合は購買率はわずか3%でしたが、6種類の場合は購買率が30%でした。つまり、オプションが多すぎると、意思決定が難しくなることを示しています。 あるシリ
グロースハックの前提条件 グロースハックをあなたの組織で実践するには、何をすればよいでしょうか? アナリティクスを導入していなければ、導入する必要がありますし、A/Bテストを実行する必要もありま。また、自分たちと似たようなビジネスモデルの他のスタートアップのグロースハックを真似してみるかもしれません。グロースハックのスキルや方法論を身につけたり、グロースハック担当者を雇い入れるのはとても大切なことです。ただし、施策の検討・実施や担当者配置だけだと、表面的にしかあなたの組織に組み込まれない可能性があります。そういった具体的な施策・アクションを実行する前に、おさえておくべき前提条件Product-Market-Fitを紹介します。 Product-market-fit はすでに検証されているか? Product-market-fitという言葉をご存知でしょうか? インターネットブラウザーNet
ABテストはグロースハックを実践するために最も重要なツールです。どのようにABテストを導入すれば良いのでしょうか? グロースハック準備編のブログでも書きましたが、ABテストを実践するためには、グロースハック4つの行動様式が必要になります。 ABテスト実勢に必要な4つの行動様式 [*① 何でも数字で計測して定量分析する習慣 ② 失敗を許容して学習する文化 ③ “アハッ”モーメントを目指す ④ 機能を捨てる勇気を持つ*] なぜこのような行動様式が必要なのでしょうか?ABテストは単発で終わらせたら意味がありません。あなたの組織の運営に組み込み、継続的な改善施策として行っていき、初めて効果が現れてきます。 クックパッドのグロースハック担当の加藤氏が述べているように、“1日1%改善を重ねれば、1年間で、38倍の成長が望める” つまり、小さな改善を毎日重ねていくことを意識してください ABテストの前提
Hotmail や Dropboxなど、資金のないスタートアップがなぜ数年でユーザー1億人以上、時価総額10億ドル以上にの会社に成長できたのか? それはグロースハックの最大活用したからと言えるでしょう。爆発的に成長したスタートアップのグロースハックのパターンを分析してみました。 [*1 ユーザービリティ向上グロースハック 2 インセンティブ活用グロースハック 3 ティーザー活用グロースハック 4 プラットフォーム型グロースハック 5 顧客定着化グロースハック*] </br> 1. ユーザービリティー 向上グロースハック: ユーザーが会員登録するプロセスを簡単にして、サインアップ率を向上させるハックです。 Dropboxのトップページは非常にシンプルになっています。Dropboxの特徴を伝える2分間のビデオとダウンロードボタンだけです。訪問したユーザーのアクションが2つに限らています。競合と
グロースハッカーは新しいマーケティング責任者だ 現在、データサイエンティストと並んで、シリコンバレーで最もセクシーな仕事と言われているグロースハッカー。製品やサービスの成長をハック(=新たなやり方で加速する)する人たちです。”ユーザー獲得担当エンジニア”などとも呼ばれています。 優秀なグロースハッカー達は豊富な広告費や予算がなくても、サービスのユーザー数やリテンション率を飛躍的に伸ばすことができる人たちです。グロースハッカーはスタートアップ企業だけでなく、すでにユーザーを多く抱えているエスタブリッシュメント企業からも引っ張りだこになっています。 グロースハッカーの名前が知れ渡ったのは、2012年のアメリカの大統領選でした。 共和党のミット・ロムニー陣営は、スタートアップでグロースハックの実績のあるアーロン・ジーンに招き入れ、グロースハックをかなりヘビーに実行しました。(ジーンのチームは数時
本当にわかりやすいスキルハブの講座 ただいま無料ビデオ14講座/98レッスンが受け放題! ■申込み期限: 9月22日まで ■募集人数: 100名(残りわずか) 今すぐ14講座を受講する(無料)
無料からプロを目指せる オンラインスクール Skillhub[スキルハブ]はフリーランス、起業したい人、転職したい人のための初心者から学べるオンラインスクールです。 今すぐ受講する(無料)
このページを最初にブックマークしてみませんか?
『Skillhub [スキルハブ]』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く