Advertisement

thegrid-top

 

「自分自身をデザインするAI(人工知能)Webサイト(AI Websites That Design Themselves)」をスローガンにした新しいサービスThe Gridをご存知でしょうか。

 

The Gridは、ユーザーが用意したテキストやイメージ写真などのコンテンツを人工知能が判断して、新しいWebサイトを自動的に作成するビルダーです。数日前にも名だたる複数の著名投資家より4.5億ドルの大きな資金調達を行ったことでもニュースとなっており、サービス開始前より盛り上がりを見せています。

 

 

そんなThe Gridをより詳しく紹介したデザインガイドラインPSD素材キットThe Grid Websites(Free PSD)が公開されていたので、今回はご紹介します。およそ1GBにも及ぶ収録ファイルには、Webサイトのレイアウトや配色などアイデアの参考になりそうなアイテムがずらりと揃っています。

 

 

 

詳細は以下から。

 

 

 

人工知能が自動でWebサイトを作成するThe Gridを体験する、無料デザインガイドラインPSDキット

 

The Grid Websites(Free PSD)は、どのようなアプローチでサービスが開発されたのか詳しく紹介したデザインPSD素材です。フレームワークのようですがシステム、特色ごとにコンテンツがまとめられているので、実際のWebサイト制作にも応用することができます。

 

1d8af9628dbad8503156e31271f71bd5

 

 

どのようなグリッド幅やフォントサイズ、カラー配色などを利用したのか確認することができるスタイルガイド。

e9b31adf905176324f27cf78d44b5ad3

 

 

スタイルガイドをどのようにウェブサービスに適用したのか確認することもできます。

0378d3766fded467fb79e82f8ddf81d1

 

 

コンテンツセクション用に用意されたコンポーネント群がずらりと並びます。各コンテンツ毎にそれぞれPSDファイルが用意されているので、どのようにデザインやレイアウトしたのか確認するだけでも確認するだけでも十分の価値がありそうです。

efef668c3276481eee7d036fcc11eb21

 

 

より詳しいコンテンツサンプルはこちら。

the-grid600-feature

 

 

人口知能が自動的に生成した配色カラーに、スタイリッシュでミニマルなWebサイトデザインが収録されています。

40ec8b45856c985d605ce058bb21718e

 

 

フルスクリーンイメージを主体とした、インタラクティブなコンテンツレイアウト、もちろんそれぞれPSDファイルが収録されています。

the-grid600-landscape

 

 

モバイルページ用ページレイアウトも用意されており、どれもレスポンシブに対応したデザインが採用されています。

8a9674e6970195277b04d99beb2fc4f4

 

 

個人ポートフォリオサイトはもちろん、企業用ランディングページやブログなど幅広いコンテンツに活躍するレイアウトが揃っています。

the-grid600-portrait

 

 

各PSDファイルは分かりやすくセクションごとにフォルダ分けされているので、目的のアイテムも一発で探すことができます。

039a32c8cdfa65e62ee3901380525dd7

 

 

よりファイルを扱いやすくするために、グリッドラインをThe Grid用に設定します。メインメニューより「Photoshop」>「環境設定」>「ガイド・グリッド・スライス」を選択したら、「グリッド線: 72px」、「分割線: 1」と設定しましょう。

howotogrid1

 

 

再度メインメニューより「表示」>「表示・非表示」>「グリッド」を適用すると、先ほど設定したグリッド線がPSDレイアウトにぴたりと一致します。

howtogrid2

 

 

利用に関するライセンスも個人、商用ともに可能となっているので、Webサイト制作に役立ててみてはいかがでしょう。The Gridのサービス開始は2015年春ごろを予定しており、ローンチ前に登録したユーザーは一般公開後も月額8ドル(およそ960円)で利用することができます。公開後は25ドル(およそ3,000円)で利用可能となります。

 

 

詳細情報はこちら

利用に関するライセンスは個人、商用ともに可能となっています。

ダウンロードする

参照元サイト: The Grid: Website (Free PSD) on Behance